摘要：最少化請(qǐng)求用戶在瀏覽網(wǎng)頁(yè)時(shí)，超過(guò)的時(shí)間都是在請(qǐng)求下載網(wǎng)頁(yè)資源，包括圖片，樣式，腳本，等等，減少這些資源的下載請(qǐng)求數(shù)目，便成了讓網(wǎng)頁(yè)提速的關(guān)鍵。但需要提的是，中對(duì)請(qǐng)求的長(zhǎng)度限制在字節(jié)以內(nèi)參考，所以如果超過(guò)這個(gè)長(zhǎng)度，只能使用請(qǐng)求。

前端工程師常常被提起網(wǎng)站性能，如何讓網(wǎng)站訪問(wèn)更快等問(wèn)題，本文就做個(gè)總結(jié)。

用戶在瀏覽網(wǎng)頁(yè)時(shí)，超過(guò)80%的時(shí)間都是在請(qǐng)求下載網(wǎng)頁(yè)資源，包括圖片，樣式，腳本，F(xiàn)lash等等，減少這些資源的下載請(qǐng)求數(shù)目，便成了讓網(wǎng)頁(yè)提速的關(guān)鍵。
當(dāng)然，如果頁(yè)面很簡(jiǎn)單，資源少，網(wǎng)頁(yè)請(qǐng)求自然就少，如果網(wǎng)頁(yè)內(nèi)容很多，我們?nèi)绾巫龅綔p少資源請(qǐng)求數(shù)呢？這里有幾個(gè)方法：

合并靜態(tài)文件，將所有腳本、樣式文件合并到一個(gè)文件里，可以大大減少HTTP請(qǐng)求數(shù)。但如果每個(gè)頁(yè)面的靜態(tài)文件都不一樣，所有文件都合并到一起也會(huì)帶來(lái)麻煩，所以需要在開(kāi)發(fā)過(guò)程中均衡處理合并。

CSS雪碧圖（Sprites），將CSS中用到的背景圖片合并到一張圖片上，然后通過(guò)background-position去定位想用到的圖片塊，可以減少圖片請(qǐng)求數(shù)。

使用data: URL scheme將圖片數(shù)據(jù)寫(xiě)入到HTML或CSS文件中，雖然增加了HTML或CSS文件大小，但必要時(shí)，還是需要這么做來(lái)減少HTTP請(qǐng)求數(shù)。

當(dāng)頁(yè)面內(nèi)容很多時(shí)，我們希望邊加載邊正確的顯示給用戶，你可能想把CSS文件放到頁(yè)面底部，這樣就可以優(yōu)先展示用戶內(nèi)容，但這會(huì)引起一個(gè)嚴(yán)重的問(wèn)題，用戶先看到的是一個(gè)沒(méi)有樣式的頁(yè)面，之后閃一下（頁(yè)面重繪）又重新定義了樣式，這其實(shí)很影響用戶體驗(yàn)。而最好的做法就是遵循HTML規(guī)范，把CSS文件放到文檔的HEAD標(biāo)簽里。

JS腳本所引起的問(wèn)題是阻塞了瀏覽器的并行下載，HTTP/1.1規(guī)范指出：每個(gè)域名下的資源的并行下載數(shù)量不得超過(guò)兩個(gè)，當(dāng)瀏覽器在下載JS文件時(shí)，不會(huì)進(jìn)行其他下載，即使資源被分發(fā)在不同的域名。

如果要?jiǎng)討B(tài)設(shè)置CSS屬性，CSS表達(dá)式（CSS expressions）就顯得尤其強(qiáng)（wei）大（xian），它在IE5.0中開(kāi)始被支持，但又在IE8.0中被廢棄。比如以下樣式，背景色會(huì)在每個(gè)小時(shí)都被定義一次。

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

可以看粗，expression方法接受一個(gè)Js語(yǔ)句去設(shè)置CSS屬性值，它只能被IE識(shí)別，所以在跨瀏覽器開(kāi)發(fā)時(shí)（兼容IE），它就有了用武之地。

但是它的問(wèn)題在于它執(zhí)行的非常頻繁，網(wǎng)頁(yè)渲染時(shí)執(zhí)行，窗口改變時(shí)執(zhí)行，甚至頁(yè)面滾動(dòng)時(shí)、用戶移動(dòng)鼠標(biāo)時(shí)它都會(huì)執(zhí)行！

減少CSS表達(dá)式執(zhí)行次數(shù)的方法是：當(dāng)頁(yè)面渲染完成后就給CSS屬性設(shè)定一個(gè)明確的值，或者在Js中監(jiān)聽(tīng)網(wǎng)頁(yè)事件，事件觸發(fā)時(shí)再去設(shè)置CSS屬性值。如果一定要使用CSS表達(dá)式，請(qǐng)記住，它很可能會(huì)被執(zhí)行成千上萬(wàn)次。

之所以外鏈CSS和JS文件會(huì)使頁(yè)面更快，是因?yàn)樗鼈兛梢员粸g覽器緩存，否則每次請(qǐng)求HTML文檔時(shí)都會(huì)重復(fù)下載CSS和JS代碼，雖然內(nèi)聯(lián)CSS和JS可以減少HTTP請(qǐng)求數(shù)，但是使得HTML文檔更大。

如果頁(yè)面比較簡(jiǎn)單，JS和CSS都很少，使用內(nèi)聯(lián)代碼減少HTTP請(qǐng)求，反而會(huì)讓頁(yè)面更快。

市面上的壓縮工具有很多，比如JSmin， YUI Compressor，GCC，pngcrush等等，可以根據(jù)業(yè)務(wù)需要選擇工具去壓縮靜態(tài)文件。

使用XMLHttpRequest對(duì)象進(jìn)行POST請(qǐng)求時(shí)，我們發(fā)現(xiàn)，它其實(shí)是分為兩步完成，現(xiàn)發(fā)送請(qǐng)求頭信息，再發(fā)送請(qǐng)求數(shù)據(jù)，所以最好使用GET請(qǐng)求，只需要發(fā)送一個(gè)TCP數(shù)據(jù)包（除非有很多Cookie數(shù)據(jù)），而且GET請(qǐng)求的數(shù)據(jù)可以被緩存。但需要提的是，IE中對(duì)GET請(qǐng)求的URL長(zhǎng)度限制在2K字節(jié)以內(nèi)(參考support.microsoft.com)，所以如果URL超過(guò)這個(gè)長(zhǎng)度，只能使用POST請(qǐng)求。

開(kāi)發(fā)過(guò)程中，想想這個(gè)元素或腳本是不是頁(yè)面初始化所必須的，如果不是，就可以考慮延遲加載它們，比如默認(rèn)被折疊的元素、需要用戶觸發(fā)才需要顯示的元素以及首屏之后的頁(yè)面元素等等。

預(yù)加載看上去和上條矛盾，其實(shí)不然。當(dāng)瀏覽器處于空閑時(shí)，我們可以預(yù)先加載之后會(huì)使用到的頁(yè)面的元素（比如：圖片，JS，CSS），之后頁(yè)面再使用這些元素時(shí)會(huì)優(yōu)先從緩存中讀取。預(yù)加載分為這兩種形式：

無(wú)條件預(yù)加載(Unconditional)：頁(yè)面一旦加載完成就去下載額外的元素，而這個(gè)元素并不一定在這個(gè)頁(yè)面上被使用，比如Google首頁(yè)加載了一張背景圖，這是為了搜索結(jié)果頁(yè)所準(zhǔn)備的。

條件預(yù)加載(Conditional)：這是基于用戶行為做出下一步猜測(cè)而去加載元素，比如當(dāng)你輸入文字時(shí)會(huì)根據(jù)文字去下載不同元素。

如果一個(gè)頁(yè)面太復(fù)雜，意味著下載時(shí)間更長(zhǎng)，同時(shí)JS訪問(wèn)DOM的速度也會(huì)變慢。減少DOM數(shù)并不意味著需要移除內(nèi)容，而是我們可以使用更合理的HTML標(biāo)簽。還在使用Table布局？頁(yè)面一堆DIV標(biāo)簽，也許我們有更好更語(yǔ)義化的布局方法。

想知道頁(yè)面的DOM數(shù)量很簡(jiǎn)單，只需要一行JS語(yǔ)句：

document.getElementsByTagName("*").length

使用多域名分發(fā)內(nèi)容可以可以增加瀏覽器并行下載數(shù)，由于DNS解析也要耗時(shí)，一般2-4個(gè)域名比較合適。比如你可以把HTML或JSP，PHP等文檔文件放在www.example.org這個(gè)域名上，而把靜態(tài)文件放在static1.example.or或者static2.example.org上。

iframe可以讓HTML文檔嵌套在另一個(gè)HTML文檔內(nèi)，想要更好的使用它們就必須知道它們的工作原理。

iframe優(yōu)點(diǎn)：
* 延遲加載廣告等第三方內(nèi)容
* 提供安全沙箱
* 并行下載腳本

iframe缺點(diǎn)：
* 代價(jià)昂貴
* 阻止父級(jí)頁(yè)面的加載
* 非語(yǔ)義化

Cookie常常被用在身份驗(yàn)證或者存儲(chǔ)個(gè)人信息，他會(huì)通過(guò)HTTP頭信息在服務(wù)端和瀏覽器之間傳輸，為了減少HTTP響應(yīng)時(shí)間，我們有必要減小Cookie。通常有以下幾個(gè)方法：

清除不必要的Cookie

盡量減小Cookie內(nèi)容的長(zhǎng)度

在適當(dāng)?shù)挠蛑性O(shè)置Cookie，保證其他子域不受影響

設(shè)定合適的Cookie的過(guò)期時(shí)間

更多關(guān)于Cookie的信息可以參考 When the Cookie Crumbles

頻繁用JS操作DOM的開(kāi)銷(xiāo)很大，我們可以通過(guò)以下幾種方式減少這種開(kāi)銷(xiāo)：
1. 緩存獲取到的DOM元素
2. 批量處理元素，一次性更新到文檔
3. 盡量避免用JS改變頁(yè)面布局

當(dāng)過(guò)多的元素被綁定頻繁被觸發(fā)的事件，頁(yè)面響應(yīng)會(huì)變慢，這時(shí)我們就需要采用事件委托。如果你不需要等待所有圖片下載完成，可以使用DOMContentLoaded事件來(lái)代替onload事件。

之前提到過(guò)，要將CSS文件放在HEAD標(biāo)簽里，在IE中，@import相當(dāng)于把CSS文件放到了頁(yè)面底部，所以最好不用這么使用。

在IE7一下，AlphaImageLoader用于解決PNG圖片透明問(wèn)題，如果圖片設(shè)置了這個(gè)屬性，當(dāng)它在下載時(shí)，會(huì)阻塞瀏覽器渲染頁(yè)面，甚至讓瀏覽器卡死，這個(gè)問(wèn)題是很?chē)?yán)重。

favicon.ico是網(wǎng)站根目錄的一張圖片，即便你不在HTML中設(shè)置它，瀏覽器也會(huì)發(fā)出請(qǐng)求，并且?guī)螩ookie等信息。

想要較少favicon.ico帶來(lái)的不良影響，需要做到：
1. 文件小，最好在1K一下
2. 在HTTP header中設(shè)置適當(dāng)?shù)倪^(guò)期時(shí)間(Expires)

空的圖片src屬性有三種形式：
HTML

CSS

.class{background:url("")}

JS

var img = new Image();
img.src = "";

這么做各瀏覽器發(fā)出請(qǐng)求情況各有差異，具體如下：
* IE會(huì)向頁(yè)面的目錄發(fā)出請(qǐng)求；
* Safari和Chrome會(huì)向當(dāng)前頁(yè)面自己發(fā)出請(qǐng)求；
* Firefox 3及一下版本和Safari一樣，向當(dāng)前頁(yè)面自己發(fā)出請(qǐng)求；
* Firefox 4及以上版本和Opera不發(fā)出請(qǐng)求；

本文粗譯自http://developer.yahoo.com/performance/rules.html，有所刪減并加了很多自己的理解。如果有錯(cuò)誤或不恰當(dāng)?shù)牡胤?，歡迎指正。

有些知識(shí)點(diǎn)只是粗描淡寫(xiě)，比如靜態(tài)資源并行下載數(shù)、@import各瀏覽器表現(xiàn)差異等，歡迎在評(píng)論中詳細(xì)討論。