前端性能優(yōu)化的14個(gè)規(guī)則

作為一個(gè)半前端工程師，而且只會(huì)寫點(diǎn)HTML5和CSS3的“假”前端工程師，為了能更好地理解一下前端的花花世界，最近拜讀了《高性能網(wǎng)站建設(shè)指南》一書，對作者提出的前端性能優(yōu)化的14個(gè)規(guī)則獲益匪淺，為了讓自己印象更深刻點(diǎn)，決定作此文，當(dāng)做學(xué)習(xí)筆記也好，知識總結(jié)也罷，總歸看過的東西要讓自己很好地掌握很好地運(yùn)用起來才是王道。在解讀這些規(guī)則的同時(shí)，我會(huì)用我一年半多的移動(dòng)網(wǎng)站開發(fā)經(jīng)歷提出一些針對移動(dòng)網(wǎng)站的優(yōu)化建議。

更多的電子書：瀏覽所有電子書資源

規(guī)則01：盡量減少HTTP請求
前端優(yōu)化的黃金準(zhǔn)則指導(dǎo)著前端頁面的優(yōu)化策略：只有10%-20%的最終用戶響應(yīng)時(shí)間花在接受請求的HTML文檔上，剩下的80%-90%時(shí)間花在為HTML文檔所引用的所有組件（圖片、腳本、樣式表等）進(jìn)行的HTTP請求上。因此，改善響應(yīng)時(shí)間的最簡單途徑就是減少組件的數(shù)量，并由此減少HTTP請求的數(shù)量。當(dāng)然很多人就會(huì)說，既然這樣，那我們就減少頁面組件的數(shù)量不就OK了嗎？那你試試，你會(huì)掀起一場性能優(yōu)化和產(chǎn)品設(shè)計(jì)之間的大PK。
所以，我們要減少HTTP請求是要平衡性能和設(shè)計(jì)的。如果找到這個(gè)平衡點(diǎn)呢？書中從以下幾個(gè)方面做了介紹，我逐一說明：
①  圖片地圖

初看“圖片地圖”四個(gè)字，對非專業(yè)的前端人員來說一頭霧水，我的第一印象就是這樣的，咱們以京東的移動(dòng)站點(diǎn)為例，右側(cè)用戶和購物車的圖標(biāo)，正常實(shí)現(xiàn)我會(huì)選擇如下方式：

這種方式無可厚非的，但是兩張圖片就有兩個(gè)HTTP請求，這明顯是增加了頁面中的HTTP請求。那么我們可以把這兩個(gè)HTTP請求變成一個(gè)嗎？
答案當(dāng)然是可以的，這就是圖片地圖：允許在一張圖片上關(guān)聯(lián)多個(gè)URL，而目標(biāo)URL的選擇取決于用戶單擊了圖片上的哪個(gè)位置。
這樣上面京東兩個(gè)圖標(biāo)合并成一張圖片，這樣圖片的HTTP請求就減少了一個(gè)。
示例代碼如下：

不過圖片地圖只支持矩形形狀，其他形狀不支持。
②  請CSS喝“雪碧”（CSS Sprites）CSS Sprites一句話：將多個(gè)圖片合并到一張單獨(dú)的圖片，這樣就大大減少了頁面中圖片的HTTP請求。

③  內(nèi)聯(lián)圖片和腳本使用data:URL（Base64編碼）模式直接將圖片包含在Web頁面中而無需進(jìn)行HTTP請求。但是此種方法存在明顯缺陷：- 不受IE的歡迎；- 圖片太大不宜采用這種方式，因?yàn)锽ase64編碼之后會(huì)增加圖片大小，這樣頁面整體的下載量會(huì)變大；- 內(nèi)聯(lián)圖片在頁面跳轉(zhuǎn)的時(shí)候不會(huì)被緩存。（大圖片可以使用瀏覽器的本地緩存，在首次訪問的時(shí)候保存到瀏覽器緩存中，典型的是HTML5的manifest緩存機(jī)制以及LocalStorage等）。

④  樣式表的合并將頁面樣式定義、腳本、頁面本身代碼嚴(yán)格區(qū)分開，但是樣式表、腳本也不是分割越細(xì)越好，因?yàn)闆]多引用一個(gè)樣式表就增加一次HTPP請求，能合并的樣式表盡量合并。一個(gè)網(wǎng)站有一個(gè)公用樣式表定義，每個(gè)頁面只要有一個(gè)樣式表就OK啦。

通過以上四個(gè)努力之后，你會(huì)發(fā)現(xiàn)你的網(wǎng)頁響應(yīng)時(shí)間最多能減少一半，這不是作者說大話，也不是我狂吹，我親手用我的移動(dòng)網(wǎng)站首頁做了一個(gè)嘗試，本地測試之后響應(yīng)時(shí)間能減少40%左右。所以減少頁面HTTP請求數(shù)量，是一個(gè)很重要的原則。遵循此原則可以同時(shí)改善首次訪問和后續(xù)訪問的響應(yīng)時(shí)間，而每一個(gè)網(wǎng)站的首次響應(yīng)時(shí)間會(huì)決定用戶之后還來不來的重要原因。

規(guī)則02：使用內(nèi)容發(fā)布網(wǎng)絡(luò)（CDN的使用）
什么叫內(nèi)容發(fā)布網(wǎng)絡(luò)（CDN）？它是一組分布在多個(gè)不同地理位置的Web服務(wù)器，用于更加有效地向用戶發(fā)布內(nèi)容。主要用于發(fā)布頁面靜態(tài)資源：圖片、css文件、js文件等。如此，能輕易地提高響應(yīng)速度。關(guān)于CDN的具體詳細(xì)原理以及優(yōu)缺點(diǎn)，各位可以自行詢問度娘或者google。

規(guī)則03：添加Expires頭
瀏覽器使用緩存來減少HTTP請求的數(shù)據(jù)，并減小HTTP響應(yīng)的大小，使頁面加載更快。Web服務(wù)器使用Expires頭來告訴瀏覽器它可以使用一個(gè)組件的當(dāng)前副本，直到指定的deadline為止。HTTP規(guī)范中稱此頭為：在這一時(shí)間之后響應(yīng)被認(rèn)為失效。個(gè)人對這塊表示不想使用，其實(shí)就是一句話，把一些css、js、圖片在首次訪問的時(shí)候全部緩存到瀏覽器本地，從我做移動(dòng)網(wǎng)站的過程中發(fā)現(xiàn)，其實(shí)沒有這么復(fù)雜，完全可以使用HTML5提供的本地緩存機(jī)制就OK了。關(guān)于HTML5本地緩存機(jī)制，各位可以查閱相關(guān)資料。后續(xù)我也會(huì)對HTML5的緩存機(jī)制進(jìn)行介紹的。

規(guī)則04：壓縮組件（使用Gzip方式）
書中關(guān)于壓縮從gzip壓縮方式到如何壓縮講了很多，我想直接跳過，對于做PC網(wǎng)站或者移動(dòng)網(wǎng)站來說，急需要壓縮的是css文件和js文件，至于如何壓縮，網(wǎng)上有很多在線工具，去挑選一個(gè)自己用的順手看的順眼的就好，當(dāng)然也有人選擇對HTML進(jìn)行壓縮，這樣也可以。但是實(shí)際工作中我沒有這么做。之所謂沒有這么做，是因?yàn)槲矣X得很麻煩。不要鄙視我，畢竟我不是一個(gè)真正意義上的前端工程師，哈哈！

規(guī)則05：將CSS樣式表放在頂部
如果將css樣式定義放在頁面中或者頁面底部，會(huì)出現(xiàn)短暫白屏或者某一區(qū)域短暫白板的情況，這和瀏覽器的運(yùn)營機(jī)制有關(guān)的，不管頁面如何加載，頁面都是逐步呈現(xiàn)的。所以在每做一個(gè)頁面的時(shí)候，用Link標(biāo)簽把每一個(gè)樣式表定義放在head中。

規(guī)則06：將javascript腳本放在底部
瀏覽器在加載css文件時(shí)，頁面逐步呈現(xiàn)會(huì)被阻止，直到所有css文件加載完畢，所以要把css文件的引用放到head中去，這樣在加載css文件時(shí)不會(huì)組織頁面的呈現(xiàn)。但是對于js文件，在使用的時(shí)候，它下面所有也頁面內(nèi)容的呈現(xiàn)都會(huì)被阻塞，將腳本放在頁面越靠下的地方，就意味著越多的內(nèi)容能夠逐步呈現(xiàn)。

規(guī)則07：避免使用CSS表達(dá)式
CSS表達(dá)式是動(dòng)態(tài)玩CSS的一種很強(qiáng)大的方式，但是強(qiáng)大的同時(shí)也存在很高的危險(xiǎn)性。因?yàn)閏ss表達(dá)式的頻繁求值會(huì)導(dǎo)致css表達(dá)式性能低下。如果真想玩css表達(dá)式，可以選用只求值一次的表達(dá)式或者使用事件處理來改變css的值。

規(guī)則08：使用外部javascript和CSS內(nèi)聯(lián)js和css其實(shí)比外部文件有更快的響應(yīng)速度，那為什么還要用外部呢？因?yàn)槭褂猛獠康膉s和css可以讓瀏覽器緩存他們，這樣不僅HTML文檔大小減少，而且不會(huì)增加HTTP請求數(shù)量。另外，使用外部js和css可以提高組件的可復(fù)用性。

規(guī)則09：減少DNS查詢
DNS查詢有時(shí)間開銷，通常一個(gè)瀏覽器查找一個(gè)給定主機(jī)名的IP地址需要20-120ms。緩存DNS：緩存DNS查詢可以很好地提高網(wǎng)頁性能，一旦緩存了DNS查詢，之后對于相同主機(jī)名的請求就無需進(jìn)行再次的DNS查找，至少短時(shí)間內(nèi)不需要。所以在使用頁面中URL、圖片、js文件、css文件等時(shí)，不要使用過多不同的主機(jī)名。

規(guī)則10：精簡javascript

如何精簡？
最初始的精簡方式：就是移除不必要的字符減小js文件大小，改善加載時(shí)間。包括所有的注釋、不必要的空白字符。

高級一點(diǎn)的精簡方式就是：混淆。
它不但會(huì)移除不必要的字符，還會(huì)改寫代碼，比如函數(shù)和變量的名字會(huì)被改成很短的字符串，這樣使js代碼更簡練更難閱讀。

但是我一般很少使用混淆，一個(gè)現(xiàn)在互聯(lián)網(wǎng)時(shí)代，代碼沒有必要整的那么神秘，大可以大家一起share，天下代碼一起抄，只要抄出自己的特色就ok了。

而且一旦使用混淆，對于js代碼的維護(hù)和調(diào)試都很復(fù)雜，因?yàn)橛袝r(shí)候混淆之后的js代碼完全看不懂。其實(shí)實(shí)際開發(fā)過程中，從文件大小和代碼可復(fù)用性來說，不僅僅是js代碼需要精簡，css代碼一樣也很需要精簡。

規(guī)則11：避免重定向
重定向的英文是Redirect，用于將用戶從一個(gè)URL重新跳轉(zhuǎn)到另一個(gè)URL。
最常見的Redirect就是301和302兩種。
關(guān)于重定向的性能影響這里就不說了，自行查閱相關(guān)資料吧。
在我們實(shí)際開發(fā)中避免重定向最簡單也最容易被忽視的一個(gè)問題就是，設(shè)置URL的時(shí)候，最后的“/”，有些人有時(shí)候會(huì)忽略，其實(shí)你少了“/”，這時(shí)候的URL就被重定向了，所以在給頁面鏈接加URL的時(shí)候切記最后的“/”不可丟。

規(guī)則12：刪除重復(fù)腳本
重復(fù)的js代碼除了有不必要的HTTP請求之外，還會(huì)浪費(fèi)執(zhí)行js的時(shí)間。
將你使用的js代碼模塊化，可以很好地避免這個(gè)問題，至于js模塊化如何實(shí)現(xiàn)，現(xiàn)在有很多可以使用的開源框架，我用的比較多的是我們公司玉伯的Sea.js。

規(guī)則13：配置ETag
Etag（Entity Tag），實(shí)體標(biāo)簽，是Web服務(wù)器和瀏覽器用戶確認(rèn)緩存組件的有效性的一種機(jī)制。寫的很復(fù)雜，對我這種非專業(yè)的前端開發(fā)人員來說，有點(diǎn)過了，關(guān)于這個(gè)原則有興趣的自己看吧。

規(guī)則14：使Ajax可緩存
針對頁面中主動(dòng)的Ajax請求返回的數(shù)據(jù)要緩存到本地，當(dāng)然這個(gè)是針對短期內(nèi)不會(huì)變化的數(shù)據(jù)。如果不確定數(shù)據(jù)變化周期的話，可以增加一個(gè)修改標(biāo)識的判斷，我正常處理過程中會(huì)給一些Ajax請求返回的數(shù)據(jù)增加一個(gè)MD5值的判斷，每次請求會(huì)判斷當(dāng)前MD5是否變化，如果變化了取最新的數(shù)據(jù)，如果不變化，則不變。

噼里啪啦說了一堆，14個(gè)規(guī)則啊，那我們開發(fā)過程中要針對這每一個(gè)規(guī)則對自己的前端代碼做check嗎？我反正不這么干，做前端頁面，尤其是移動(dòng)網(wǎng)站的頁面，我所記住的準(zhǔn)則就是：盡量減少頁面大小，盡量降低頁面響應(yīng)時(shí)間。在頁面性能和交互設(shè)計(jì)之中找平衡點(diǎn)。