原則1 減少(shǎo)HTTP請(qǐ★'"ng)求數(shù)

構造請(qǐng)求、等待響應需要(yào)時"γ(shí)間(jiān)，因此請(qǐng)求數(shù)量越少(shǎo)ε✔★α越好(hǎo)。減少(shǎo)請(qǐng)求的(•&‍βde)總體(tǐ)思路(lù)就(jiù)是(shì©↔₹)合并資源，減少(shǎo)顯示一(yī)個(gè)頁↔£ '面需要(yào)的(de)文(wén)件(jiàn)數(shù)。↔≤

1. Image Map

通(tōng)過設置<img>标簽的(de)us↔$emap屬性與使用(yòng)<map>标簽可(kě)以在↕€一(yī)幅圖片上(shàng)切分(fēn)出多(duō)± 個(gè)區(qū)域，指向不(bù)同的(de)鏈接。比起使用(yòng)多∑∏♥(duō)幅圖片分(fēn)别構造鏈接減少(shǎo€♥)了(le)請(qǐng)求數(shù)。

2. CSS Sprite（CSS貼圖整合/貼圖拼合/貼圖定位≠₹£↔）

通(tōng)過設置元素的(de)backg  >•round-position樣式做(zuò)到(dào)。一(yī)般用(♣♠•yòng)于界面圖标。典型的(de)可(kě)以參考TinyMCE編輯器(q¶$☆≥ì)上(shàng)方的(de)那(nà)些(xiē)小(xiǎo↕≈α↕)按鈕。多(duō)個(gè)小(xiǎo)圖實質是(sh‌™ì)從(cóng)一(yī)個(gè)統一(yī)的(de)大(dà)φ₩λ&圖通(tōng)過不(bù)同的(de)偏移量裁剪而來(lái  >)，這(zhè)樣加載界面上(shàng)的(de)衆多(duō)按鈕實際上α &(shàng)隻要(yào)請(qǐng)求一(yī)± 次（請(qǐng)求大(dà)圖一(yī)次），★♠從(cóng)而減少(shǎo)HTTP請(qǐng)求數(shù♦‍₽)。

3. Inline Image（內(nèi)聯圖片）

在<img>的(de)src>™≈™中不(bù)指定外(wài)部圖片文(wén)件(jiàn)★ δ的(de)URL，而是(shì)直接将圖片信≠δ​♦息放(fàng)入。例如(rú)src="dat‌±δ'a:image/gif;base64,R0lGODlhDAAMAL..."某♠✘β些(xiē)特殊情況下(xià)有(yǒu)用‍♦(yòng)（例如(rú)一(yī)個(> ₽gè)不(bù)大(dà)的(de)圖片僅在當前頁面用(yòn✔Ω↓≥g)到(dào)）。

原則2 利用(yòng)多(duō)線路(lù)CDN

為(wèi)你(nǐ)的(de)站(zhàn÷♠)點提供多(duō)種線路(lù)（例如(rú)國(g<αuó)內(nèi)電(diàn)信、聯通(tōng)、移動）、多(duō) ↓™個(gè)地(dì)理(lǐ)位置（北(běi)方、南(nán) σ 方、西(xī)部）的(de)訪問(wèn)，使得(de)所有(yǒu)用(ε™‌×yòng)戶都(dōu)能(néng)夠快(kuài)速訪問₽≠σ×(wèn)。

原則3 利用(yòng)HTTP Cache

給不(bù)頻(pín)繁更新的(de)資₽ε±源（例如(rú)靜(jìng)态圖）加較長(cháng)的(de)Ex& ‍®pires頭信息，這(zhè)些(xiē)∞‍♥ 資源一(yī)經緩存，未來(lái)很(hěn)長(cháng)₽↑時(shí)間(jiān)都(dōu)可(k♦✘<₩ě)以不(bù)再重複傳輸了(le)。

原則4 使用(yòng)Gzip壓縮

使用(yòng)Gzip壓縮HTTP報(bào)文(wén)×∑<∏，減小(xiǎo)體(tǐ)積，減少(shǎo)傳輸時(shí)間λπ(jiān)。

原則5 将樣式表置于頁面前部

先加載樣式表，這(zhè)樣頁面渲染得(de)以較早開(kāi)始，給用(≠& yòng)戶頁面加載較快(kuài)的(de)感覺。

原則6 将腳本置于頁面尾部

原因同5，先處理(lǐ)頁面顯示，頁面渲染較早完成，而腳本邏輯‍ ₩稍後執行(xíng)，這(zhè)樣給用(yòng)戶♣ε₽頁面加載較快(kuài)的(de)感覺。

原則7 避免使用(yòng)CSS表達式

過于複雜(zá)的(de)JavaScript腳本邏輯₩α、DOM查找、選擇操作(zuò)将會(huì)降低(d≤δ♣ī)頁面處理(lǐ)效率。

原則8 将JavaScript與CSS作(zuò)為(wèi)外(wàσ&♦i)聯資源

這(zhè)似乎與原則1中的(de)合并思想相(xiàn♥↕g)悖，但(dàn)其實不(bù)然：考慮每個(gè)☆§​頁面都(dōu)引入了(le)一(yī)個(gè)公共的(de)J ×avaScript資源（例如(rú)jQuery或是(shì)Eε★₩↑xtJS這(zhè)樣的(de)JavaScr♣©¥ipt庫），單就(jiù)一(yī)個(gè)頁面的(de)表現(<♥↔Ωxiàn)來(lái)看(kàn)，內(nèi)聯（即£φ≤将JavaScript嵌入HTML）頁面将比外(wài)聯（使 >♥用(yòng)<script>标簽引入）頁×α面加載更快(kuài)（因為(wèi)其較少(shǎo)的(de$€)HTTP請(qǐng)求數(shù)）。但(dàn)如(rú)果有≤±(yǒu)很(hěn)多(duō)頁面都(dōu)引入​≈®→了(le)這(zhè)個(gè)公共JavaScript資源，那(nà)麽內(₹♠≠nèi)聯方案會(huì)造成重複傳輸（因為(wèi)↓Ω→這(zhè)個(gè)資源內(nèi)嵌在每€α個(gè)頁面中了(le)，所以每次打開(kāi)一(λ ≈yī)個(gè)頁面都(dōu)要(yào)将這(zh₹∏α​è)部分(fēn)資源傳輸一(yī)遍，從(cóng)而造成網絡傳☆<≥輸資源的(de)浪費(fèi)）。而将這(zhè)種資源獨立出÷σ來(lái)外(wài)聯引用(yòng)可(k←±εě)以解決這(zhè)個(gè)問(wèn♣×α)題。

由于JavaScript和(hé)CSS相(xiàng)π'α"對(duì)穩定，我們可(kě)以對(dβ✔←★uì)其對(duì)應的(de)資源設置較長(cháng)的(deσ>₽↑)失效期（參考原則3）。

原則9 減少(shǎo)DNS查找

作(zuò)者給出的(de)建議(yì)是(≈≤λ"shì)：

1. 使用(yòng)Keep-Alive保持連接

如(rú)果連接斷開(kāi)，那(nà)麽下(xià)λ♠次連接又(yòu)要(yào)執行(xíng)DNS查找，即使對(duì)φ♦∞應的(de)域名-IP映射已被緩存，查找也(yě)是(shì)要(yào)≠≤消耗一(yī)些(xiē)時(shí)間♣∏↔☆(jiān)的(de)

2. 減少(shǎo)域名

每次請(qǐng)求新域名都(dōu)需€™↑©要(yào)進行(xíng)通(tōng)過DNS查找不(bù‌‍)同的(de)域名，且DNS緩存無法發揮作(zuò)用(yòng)∏∞↕'。因此應該盡量将站(zhàn)點組織在一(yī)個(gè)統一(y φī)域名下(xià)，避免使用(yòng)過多(duō)子(zǐ)域名

原則10 壓縮你(nǐ)的(de)JavaScript

使用(yòng)JS壓縮工(gōng)具壓縮你(nǐ)的(deφ≥)JavaScript吧(ba)，很(hě∞☆n)有(yǒu)效哦。看(kàn)看(kàn→≈)jQuery的(de)兩個(gè)不(bù)同的(de÷π)發行(xíng)版本就(jiù)知(zhī)道‍π​(dào)區(qū)别了(le)：

http://code.jquery.com/jquery-1.6♠÷"✔.2.js 閱讀(dú)版jQuery代碼，230KB

http://code.jquery.com/jquery-1.✘™≤₹6.2.min.js 壓縮版jQuery®&代碼（用(yòng)于實際部署），89.4KB

原則11 盡量避免重定向

一(yī)次重定向意味著(zhe)在你(nǐ)真正訪問≤'(wèn)到(dào)想要(yào)看(k∏→àn)到(dào)的(de)頁面前加入了(le)一(yī)輪額外(wài)π∞< 的(de)HTTP請(qǐng)求（客戶端發起HTTP請(qǐng)求→HTT>∏→P服務器(qì)返回重定向響應→客戶端對(♦≠₽βduì)新URL發起請(qǐng)求→HTTP服務器(α×≈™qì)返回內(nèi)容，下(xià)劃線部分(fēn•✘₽§)為(wèi)額外(wài)的(de)請(qǐng)求），因此消耗更£÷​"多(duō)的(de)時(shí)間(jiān)（也(yě)就(jiù)給€©‍₩人(rén)反應更慢(màn)的(de)感覺）。因此除≤₹非必要(yào)，不(bù)要(yào)随意使用(yò₹↕®¥ng)重定向。幾個(gè)“必要(yào)”的(de)情況：

1. 避免URL失效

舊(jiù)站(zhàn)點遷移後，為(wèi)了(le)避免舊(jiù)£↑的(de)URL失效，通(tōng)常将對(duì)舊(φ¥∏≈jiù)URL的(de)請(qǐng)求重定向至新系​∏₽♠統的(de)對(duì)應地(dì)址。

2. URL美(měi)化(huà)

在可(kě)讀(dú)性好(hǎo)的(de)URL與↓$實際資源URL之間(jiān)轉換，例如(←&rú)對(duì)于Google Toolbar，用(y≈βòng)戶記得(de)住http://t••←oolbar.google.com這(zhè ≤→ )個(gè)對(duì)人(rén)類富有(yǒu)語義的(de)地(dì)Ω☆π®址，卻很(hěn)難記住http://www.google.com/to×'→ols/firefox/toolbar/FT3/intl/en/index.h≤∞'tml這(zhè)個(gè)真正的(de)資₽‍源地(dì)址。因此有(yǒu)必要(yào)保留前者，并且将對Ω÷♣∞(duì)前者的(de)請(qǐng)求重$ ₹♣定向至後者。

原則12 移除重複的(de)腳本

不(bù)要(yào)在一(yī)個(gè)頁面中重複引入相(xià €πng)同的(de)腳本。例如(rú)腳本B和(hé)C都(dōu)依賴于A↕"↓，那(nà)麽在使用(yòng)了(le)B和(hé)Cε↓>的(de)頁面中就(jiù)有(yǒu) ®€可(kě)能(néng)存在對(duì)A的(de)重複引用(y♠₩òng)。解決方法，對(duì)于簡單的(de)站(zhàn)點手動檢查依賴性<σ，消去(qù)重複引入；對(duì)于複雜(záα↔)的(de)站(zhàn)點則需要(yào)構λ>φ建自(zì)己的(de)依賴管理(lǐ)/版本控制(zhì)機(jī)≤↓制(zhì)。

原則13 小(xiǎo)心處理(lǐ)ETag

ETag是(shì)除Last-Modified≥λ之外(wài)的(de)另一(yī)種HTTP Cach‍↑•φe手段。通(tōng)過hash的(de)辦法辨識資源是↑∑σ(shì)否被修改。但(dàn)ETag存在一(yī)✔λ÷些(xiē)問(wèn)題，例如(rú)：

1. 不(bù)一(yī)緻：不(bù)同Web服務器(qì)（Apache， ₩✔& IIS等）定義的(de)ETag格式不(bù♥∏↕α)同

2. ETag的(de)計(jì)算(suàn)是(shì)不(bù±×←)穩定的(de)（由于考慮過多(duō)因素），例如(rú)：

1） 相(xiàng)同資源在不(bù)同服務器(qì)上(shàng)計(j≤σδì)算(suàn)出來(lái)的(de)ETag不(bù)一(yī)樣，而大÷<(dà)型Web應用(yòng)通(tōng)常由不(b↓Ω÷ù)止一(yī)台服務器(qì)提供服務，這(zhè)就(jiù)導緻客戶端‌$在服務器(qì)A緩存好(hǎo)的(de)資源明(m♠©σíng)明(míng)仍然有(yǒu)效，而在下δα(xià)次請(qǐng)求B時(shí)由于ETa×☆®​g不(bù)同而被認定為(wèi)失效，導緻相(xiàng)同資源的(de)‌±☆重複傳輸。

2） 資源不(bù)變，而由于一(yī)些(xiē)其他(≥¶₩$tā)因素的(de)變化(huà)，例如(rú)配置文(wén)件(jiàn ₩≠')更改，導緻ETag變化(huà)。直接後果<♠是(shì)系統更新後客戶端大(dà)規模發生(shēng)Cache失效‌∑& ，導緻傳輸量大(dà)增，站(zhàn)點性能(néng)下(xià)降∑≈∞。

作(zuò)者給出的(de)建議(yì)是(shì)：要(yào)麽根據你(←σ£φnǐ)的(de)應用(yòng)特點改進已有(yǒu)的(de)ETag計(₽☆₽★jì)算(suàn)方法，要(yào)麽幹脆就(ji≠☆¥₹ù)不(bù)用(yòng)ETag，而改用(yòng)最簡單的(de ♥)Last-Modified。

原則14 在Ajax中利用(yòng)HTTP Cache

Ajax是(shì)異步請(qǐng)求，異÷ ✘步請(qǐng)求不(bù)會(huì)阻塞你(nǐ)現(xiàn)在的(✘ε∞de)操作(zuò)，而且當請(qǐng)求完成時(shí)，你(nǐ)馬λ↔上(shàng)就(jiù)可(kě)以看(kàn)到(dào)結果§•。但(dàn)異步不(bù)代表能(néng)夠瞬時(shí$₩ ')完成，也(yě)不(bù)代表能(néng)夠容忍它花(huā)無限‌ α≈多(duō)的(de)時(shí)間(jiān$>↕♦)完成。因此對(duì)于Ajax請(qǐng)求的(♥≤¥≤de)性能(néng)也(yě)需要(yào" ™↕)重視(shì)。有(yǒu)很(hěn)多(duō)Ajax請(★"×qǐng)求訪問(wèn)的(de)是(shì)一(yī)些(xiēγ™)相(xiàng)對(duì)穩定的(de)資源，因此别♥←₩忘了(le)對(duì)Ajax請(qǐng)₩✘求利用(yòng)好(hǎo)HTTP Cache機(jī)制(zhì)，具體♥β☆₽(tǐ)參見(jiàn)原則3、13。