大家好，我是IT修真院深圳分院第01期學(xué)員主穗，一枚正直純潔善良的web程序員泻拦。
今天給大家分享一下，修真院官網(wǎng)JS（職業(yè)）任務(wù)5黔牵，深度思考中的知識(shí)點(diǎn)——如何進(jìn)行web前端性能優(yōu)化聪轿？
1. 背景
用戶訪問網(wǎng)頁(yè)的等待時(shí)間，有80%是發(fā)生在瀏覽器前端猾浦，特別是頁(yè)面和頁(yè)面中各種元素（圖片陆错、CSS灯抛、JavaScript、 flash…）的下載之上音瓷，因此進(jìn)行前端優(yōu)化很有必要对嚼。
2. 方法
2.1 初次訪問
1）減少一個(gè)頁(yè)面訪問所產(chǎn)生的http連接次數(shù)
--盡量簡(jiǎn)潔的頁(yè)面設(shè)計(jì)，最大程度減少圖片的使用绳慎，通過放棄一些不必要的頁(yè)面特效來(lái)減少javascript的使用纵竖。
--使用一些優(yōu)化技巧，比如利用圖片的背景位移減少圖片的個(gè)數(shù)杏愤；image map技術(shù)链瓦；Sprites圖期贫；使用Inline images將css圖片捆綁到網(wǎng)頁(yè)中帝雇。
--盡量合并js和css文件绪爸，減少獨(dú)立文件個(gè)數(shù)。
2）使用gzip壓縮網(wǎng)頁(yè)內(nèi)容
使用gzip來(lái)壓縮網(wǎng)頁(yè)中的靜態(tài)內(nèi)容厕宗，能夠顯著減少用戶訪問網(wǎng)頁(yè)時(shí)的等待時(shí)間画舌。主流的web服務(wù)器都支持或提供gzip壓縮，如果使用apache服務(wù)器已慢，只需要在配置文件中開啟 mod_gzip（apache1.x）或mod_deflate(apache2.x)即可曲聂。
使用gzip壓縮都能夠顯著提高服務(wù)器效率并減少帶寬支出，注意圖片內(nèi)容本身已經(jīng)是壓縮格式了佑惠，務(wù)必不要再進(jìn)行壓縮朋腋。
3）將CSS放在頁(yè)面頂端，JS文件放在頁(yè)面底端
CSS的引用要放在html的頭部header中兢仰，JS文件引用盡量放在頁(yè)面底端標(biāo)簽的后面乍丈，主要的思路是讓核心的頁(yè)面內(nèi)容盡早顯示出來(lái)剂碴。
4）使JS文件內(nèi)容最小化
使用一些javascript壓縮工具對(duì)js腳本進(jìn)行壓縮把将，去除其中的空白字符、注釋忆矛，最小化變量名等察蹲。
5）盡量減少外部腳本的使用，減少DNS查詢時(shí)間
不要在網(wǎng)頁(yè)中引用太多的外部腳本催训，首先洽议，一次dns的解析過程會(huì)消耗20-120毫秒的時(shí)間；其次漫拭，如果在頁(yè)面中引用太多的外部文件（如各種廣告亚兄、聯(lián)盟等代碼），可能會(huì)因?yàn)橥獠课募捻憫?yīng)速度而將你的網(wǎng)站拖得很慢采驻。瀏覽器一般只能并行處理同一域名下的兩個(gè)請(qǐng)求审胚，而對(duì)于不同子的域名則不受此限制匈勋，因此適當(dāng)將本站靜態(tài)內(nèi)容（css,js）放在其他的子域名下（如 static.xxx.com）會(huì)有利于提高瀏覽器并行下載網(wǎng)頁(yè)內(nèi)容的能力。
如果必須引用外部文件膳叨，盡量將這些腳本放在頁(yè)腳洽洁，可以使用CDN加速和DNS域名解析加速。
2.2 經(jīng)常訪問
1）在header中添加過期時(shí)間(Expires Header)
在header中給靜態(tài)內(nèi)容添加一個(gè)較長(zhǎng)的過期時(shí)間菲嘴，這樣可以使用戶今后訪問只讀取緩存中的文件饿自，而不會(huì)與服務(wù)器產(chǎn)生任何的交互。
這樣做存在一些問題龄坪，當(dāng)圖片昭雌、CSS和js文件更新時(shí)，用戶如果不刷新瀏覽器健田，就無(wú)法獲得此更新城豁。這樣，我們?cè)趯?duì)圖片抄课、css和js文件修改時(shí)唱星，必須要進(jìn)行重命名，才能保證用戶訪問到最新的內(nèi)容跟磨。這可能會(huì)給開發(fā)造成不小的麻煩间聊，因?yàn)檫@些文件可能被站點(diǎn)中的許多文件所引用。
flickr提出的解決辦法是通過url rewrite使不同版本號(hào)的URL抵拘，事實(shí)上指向同一個(gè)文件哎榴，因?yàn)閡rl級(jí)別的操作效率是很高的，可以給開發(fā)過程提供不少便利僵蛛。
瀏覽器訪問url時(shí)的工作機(jī)制：
--第一次訪問url時(shí)尚蝌，用戶從服務(wù)器段獲取頁(yè)面內(nèi)容，并把相關(guān)的文件（images,css,js…）放在高速緩存中充尉，也會(huì)把文件頭中的expired time,last modified, ETags等相關(guān)信息也一同保留下來(lái)飘言。
--用戶重復(fù)訪問url時(shí)，瀏覽器首先看高速緩存中是否有本站同名的文件驼侠，如果有姿鸿，則檢查文件的過期時(shí)間；如果尚未過期倒源，則直接從緩存中讀取文件苛预，不再訪問服務(wù)器。
--如果緩存中文件的過期時(shí)間不存在或已超出笋熬，則瀏覽器會(huì)訪問服務(wù)器獲取文件的頭信息热某，檢查last modifed和ETags等信息，如果發(fā)現(xiàn)本地緩存中的文件在上次訪問后沒被修改，則使用本地緩存中的文件昔馋；如果修改過芜繁，則從服務(wù)器上獲取最新版本。
2）將css和js文件放在獨(dú)立外部文件中引用
將css和js文件放在獨(dú)立文件中绒极，這樣它們會(huì)被單獨(dú)緩存起來(lái)骏令，在訪問其他頁(yè)面時(shí)可以從瀏覽器的高速緩存中直接讀取。
3）去掉重復(fù)的腳本
在IE中垄提，包含重復(fù)的js腳本會(huì)導(dǎo)致瀏覽器的緩存不被使用榔袋。
4）避免重定向的發(fā)生
除了在header中人為的重定向之外，網(wǎng)頁(yè)重定向常在不經(jīng)意間發(fā)生铡俐，被重定向的內(nèi)容將不會(huì)使用瀏覽器的緩存凰兑。比如用戶在訪問www.xxx.com，服務(wù)器會(huì)通過301轉(zhuǎn)向到www.xxx.com/审丘，在后面加了一個(gè)“/”吏够。如果服務(wù)器的配置不好，這也會(huì)給服務(wù)器帶來(lái)額外的負(fù)擔(dān)滩报。通過配置apache的 alias或使用mod_rewrite模塊等方法锅知，可以避免不必要的重定向。
3.常見問題
以上
4.解決方案
以上
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
幾種不常用的方式：使用CDN分發(fā)機(jī)制脓钾、避免CSS表達(dá)式售睹、避免使用ETags
7.參考文獻(xiàn)
8.更多討論
鳴謝
感謝大家觀看
BY : 王蒙
視頻鏈接
------------------------------------------------------------------------------------------------------------------------
今天的分享就到這里啦可训，歡迎大家點(diǎn)贊昌妹、轉(zhuǎn)發(fā)、留言握截、拍磚~
