1. 首頁
  2. 新聞資訊

新聞資訊

13 2014 03月(yuè)

[轉載]雅虎35條優化(huà)黃(huáng)金(jīn)守則（一★€(yī)）

by DareWe

Yahoo!的(de) Exceptional Perfor'₩mance團隊為(wèi)改善 Web性能(néng)帶來(lái‍​✔≠)最佳實踐。他(tā)們為(wèi)此進行(xíng)了(le)一(y&☆ī)系列的(de)實驗、開(kāi)發了(le)各種工(gōng)具、寫©♣§∑了(le)大(dà)量的(de)文(wén)章(zhāng)和(hé)博客并 ‍在各種會(huì)議(yì)上(shàng)參與₹÷ 探討(tǎo)。最佳實踐的(de)核心就(jiù)是(shì)旨在提高(g  āo)網站(zhàn)性能(néng)。總結出了(≠★€©le)一(yī)系列可(kě)以提高(gāo↕☆α​)網站(zhàn)速度的(de)方法。可(k♦☆‌σě)以分(fēn)為(wèi) 7大(dà)類 35條®©∞'。包括內(nèi)容 、服務器(qì) 、 CSS 、 JavaScr ≤ipt 、Cookie 、圖片 、移動應用(yòng) ，七部分(fēn♦ )。

一(yī)、內(nèi)容部分(fēn)

  • 盡量減少(shǎo) HTTP請(qǐng)求
  • 減少(shǎo) DNS查找 ©ε
  • 避免跳(tiào)轉
  • 緩存 Ajxa
  • 推遲加載
  • 提前加載
  • 減少(shǎo) DOM元素數(sh<®≈ù)量
  • 用(yòng)域名劃分(fēn)頁面內(nèi)容 "★ ©
  • 使 frame數(shù)量最少(shǎo) ®§Ω
  • 避免 404錯(cuò)誤

1、盡量減少(shǎo) HTTP請(qǐng)求次數(shù≈↔  )

       終端"≤用(yòng)戶響應的(de)時(shí)間(jiān)中，有(yǒu) 80φ÷%用(yòng)于下(xià)載各項內(nèi)容。這(zhè'γ™​)部分(fēn)時(shí)間(jiān)‌¥λ∞包括下(xià)載頁面中的(de)圖像、樣式表、腳本、 Flash等。♦→&£通(tōng)過減少(shǎo)頁面中的(de)元素可(kě)以減少(sh¶&¥ǎo) HTTP請(qǐng)求的(de)次數(shù)。這(zhè)是(÷♣shì)提高(gāo)網頁速度的(de)關鍵步驟。

  減少(shǎ‍π¥o)頁面組件(jiàn)的(de)方法其實就(jiù)是(shì)簡化(€'™≈huà)頁面設計(jì)。那(nà)麽有(yǒu)沒有(yǒu)一& €(yī)種方法既能(néng)保持頁面內(nèi)容的(§↕ ±de)豐富性又(yòu)能(néng)達到(dào)加快(₩ ‌kuài)響應時(shí)間(jiān)的(de)目的(de ≠↓)呢(ne)？這(zhè)裡(lǐ)有(yǒu)幾條★★減少(shǎo)HTTP請(qǐng)求次 ☆>↔數(shù)同時(shí)又(yòu)可(kě)能(néng)✔ ♦§保持頁面內(nèi)容豐富的(de)技(jì)術(shù)。


合并文(wén)件(jiàn)是(s∑€​hì)通(tōng)過把所有(yǒu)的(de)腳本放(fà✘↔₩ng)到(dào)一(yī)個(gè)文(€✘✔wén)件(jiàn)中來(lái)減少(shǎo) HTTP請₹‌©‌(qǐng)求的(de)方法，如(rú)可(kě)≠ ↓以簡單地(dì)把所有(yǒu)的(de) CSS文(wén)←β ​件(jiàn)都(dōu)放(fàng)入一₽ε★€(yī)個(gè)樣式表中。當腳本或者樣€&₩∏式表在不(bù)同頁面中使用(yòng)時(αε↔shí)需要(yào)做(zuò)不(bù)同的(σ↕de)修 改，這(zhè)可(kě)能(nε♥©éng)會(huì)相(xiàng)對(d♥α‌uì)麻煩點，但(dàn)即便如(rú)此也(yě)要(yào)把這(zhè)φ₩個(gè)方法作(zuò)為(wèi)改善頁面性能(néng)的®β≈(de)重要(yào)一(yī)步。

CSS Sprites是(shì)減少(shǎo)圖像請‍Ω✘£(qǐng)求的(de)有(yǒu)效方法。把所有(yǒu)的(de)背景λ ¥↕圖像都(dōu)放(fàng)到(dào)一(yī)個© ↓(gè)圖片文(wén)件(jiàn)中，然後通(tōng)過 CSS ₽π→的(de) background-image和(hé) backgr₹‍♣ound-position屬性來(lái)顯∑≥示圖片的(de)不(bù)同部分(fēn)；


圖片地(dì)圖是(shì)把多(duō)張圖片整合到‍ (dào)一(yī)張圖片中。雖然文(wén)件(jiàn)的(de)總體(β tǐ)大(dà)小(xiǎo)不(bù)會(huì)改變，但(dà≤♠n)是(shì)可(kě) 以減少(shǎo) H​$₽σTTP請(qǐng)求次數(shù)。圖片地(dì)​♠β¶圖隻有(yǒu)在圖片的(de)所有(yǒu)組成部分(fēn≤©★)在頁面中是(shì)緊挨在一(yī)起的(de)時(shí)候才能(n↑σ§éng) 使用(yòng)，如(rú)導航欄。确定圖片的(de)坐(zuò)π♠δ标和(hé)可(kě)能(néng)會(huì)比較繁瑣且容易出錯(<βcuò)，同時(shí)使用(yòng)圖片地(dì)圖導航也(λ•yě)不(bù)具有(yǒu)可(kě)讀(dú)性，因此不(↓↕bù)推薦這(zhè)種方法；


內(nèi)聯圖像是(shì)使用(yòng)‍≥÷ data:URL scheme的(de)方≠∑↑$法把圖像數(shù)據加載頁面中。這(zhè)可(kě)能(néng)會(✘™®★huì)增加頁面的(de)大(dà) 小(xiǎo)。把內(nèi)聯圖像÷'←放(fàng)到(dào)樣式表（可(kě)緩存）中可(kě)以減少(s ®hǎo) HTTP請(qǐng)求同時( ♣'​shí)又(yòu)避免增加頁面文(wén)₹ 件(jiàn)的(de)大(dà)小(xiǎo)。但(dàn)是(shì)☆↕​內(nèi)聯圖像現(xiàn)在還(hái)沒有≠α(yǒu)得(de)到(dào)主流浏覽器(qì)的(de) 支持。  ↔"↑


  減少(shǎo) ₹頁面的(de) HTTP請(qǐng)求次數(shù)是(shì)>$£'你(nǐ)首先要(yào)做(zuò)的(de)一(yī)步。這(zhè)是→∞(shì)改進首次訪問(wèn)用(yòn↕≈☆ g)戶等待時(shí)間(jiān)的(de)最重要(yàoσ π×)的(de)方法。 如(rú)同 Tenni The¥ σurer的(de)他(tā)的(de)博客 $☆Browser Cahe Usage - E↑β₹σxposed!中所說(shuō)， HTT←€>P請(qǐng)求在無緩存情況下(xià)占去(qù)了(l↓¶ βe) 40%到(dào) 60%的(de)響應時(shí)間(jiā® €&n)。讓那(nà)些(xiē)初次訪問(wèn)你(nǐ)網站≠≥(zhàn)的(de)人(rén)獲得(de)更加快(kuài)速的(de)體 π(tǐ)驗吧(ba)！


2、減少(shǎo) DNS查找次數(shù)♠λ>

  域名系統（ DNS）提供了(le×£ )域名和(hé) IP的(de)對(duì)應關系，就(jiù)像電(di☆₩Ω àn)話(huà)本中人(rén)名和(hé)他(tā)們的(de)電(dià£₹n)話(huà)号碼的(de)關系一(yī)樣。ε★"≥當你(nǐ)在浏覽器(qì)地(dì)址欄中 輸入 www.yahoo.c®₽om 時(shí)， DNS解析服務器(qì)就(ji& $ù)會(huì)返回這(zhè)個(gè)域名對(duì)應的(de•♠ ) IP地(dì)址。 DNS解析的(de)過程同樣也φ™§(yě)是(shì)需要(yào)時(shí)間(jiān)的(de)。©↔一(yī)般情況下(xià)返回給定域名對(duì)應的(de) IP§±地(dì)址會(huì)花(huā)費(fèi) 20到(dào✘•) 120毫秒(miǎo)的(de)時(shí)間(jiān)。而且在這( ↓§€zhè)個(gè)過程中浏覽器(qì)什(shén)麽都(dōu)不(bù)會¥ε↕©(huì)做(zuò)直到(dào) DNS查붶<找完畢。


   緩存 DNS查找可(kě)以改善頁面性能(nε​ éng)。這(zhè)種緩存需要(yào)一(yī)個(gè)特定的(¥  de)緩存服務器(qì)，這(zhè)種服¶₽≥務器(qì)一(yī)般屬于用(yòng)戶的(de) Iα∞SP提供商或者本地(dì)局域網控制(zhì)，✔‍但(dàn)是(shì)它同樣會(huì)在用(yòng)戶使用(yò←♦ng)的(de)計(jì)算(suàn)機(jī)上(shà₹♥​→ng)産生(shēng)緩存。 DNS信息會(huì)保留在≥®操作(zuò)系統的(de) DNS緩存中（微(wēi)軟 WindΩ≥♦γows系統中 DNS Client Service）。大(dà)₽≤多(duō)數(shù)浏覽器(qì)有(yǒu)獨立于操作(zu$∏÷ò)系統以外(wài)的(de)自(zì)己的(de)緩存。由于 &£♣浏覽器(qì)有(yǒu)自(zì)己的(de)π®₹緩存記錄，因此在一(yī)次請(qǐng)求中它不(bù)會(huì)受σγ到(dào)操作(zuò)系統的(de)影(yǐng)響。 ♦₹≈


  Internet Explorer 默認↕€§↑情況下(xià)對(duì) DNS查找記錄的(de)緩存時('$✘shí)間(jiān)為(wèi) 30分(fēn)鐘(zhōng≤↓π‌)，它在注冊表中的(de)鍵值為(wèi) DnsCacheTimeout。 §≠Firefox對(duì) DNS的(de)查找記錄₽←緩存時(shí)間(jiān)為(wèi) 1分(fēn)鐘(zhōng)₽↔★，它在配置文(wén)件(jiàn)中的(de)選☆'δ項為(wèi) network.dnsCacheExpiration（ Fa★Ωsterfox把這(zhè)個(gè)選項改為(wèi)了(le) ←∏≠1小(xiǎo)時(shí)）。


  當客戶端中的(de) DNS緩存都(dōβ•u)為(wèi)空(kōng)時(shí)（浏覽器(qì)和(hé)操作(z₽σuò)系統都(dōu)為(wèi)空(kōng)£↓）， DNS查找的(de)次數(shù)和(hé)​ ™♠頁面中主機(jī)名的(de)數(shù)量相​γ(xiàng)同。這(zhè)其中包括頁面中 URL、圖片、腳本文(γ↕₩§wén)件(jiàn)、樣式表、Flash對(duì)象✔δ∞ 等包含的(de)主機(jī)名。減少(shǎo)主機(jī)名的(de)數↔ δ∏(shù)量可(kě)以減少(shǎo)DNS查找次數(shù)。


  減少(shǎo)主機(jī)名的(de)數"₹​Ω(shù)量還(hái)可(kě)以減少(sh≈‍↓ǎo)頁面中并行(xíng)下(xià)載的(de)數(♣&$shù)量。減少(shǎo) DNS查找次數(shù)可(kě)以節省響應時( ☆​shí)間(jiān)，但(dàn)是(shì)減少(§→©shǎo)并行(xíng)下(xià)載卻₽∞✘ 會(huì)增加響應時(shí)間(jiān)。我的(de)指≠>導原則是(shì) 把這(zhè)些(xiē)頁面中的(de)內(÷σ nèi)容分(fēn)割成至少(shǎo)兩部分(fēn)但÷ ¥™(dàn)不(bù)超過四部分(fēn)。這(z∞αλ≤hè)種結果就(jiù)是(shì)在減少(shǎo) DNS查找₩•★次數(shù)和(hé)保持較高(gāo)程度并行(xíng)下(xiλ¥à)載兩者之間(jiān)的(de)權衡了(l₹÷σ e)。


3、避免跳(tiào)轉

跳(tiào)轉是(shì)使用(yòng) 301和(hé♦₩α) 302代碼實現(xiàn)的(de)。下(xià)面是(shì)>☆​一(yī)個(gè)響應代碼為(wèi) 301的(de) HTTP頭： ♣ΩΩ©

      HTTP/←'Ωδ1.1 301 Moved Permanently

     &nb✔£sp;Location: htδ≤tp://example.com/newuri

      Content★©π®-Type: text/html

  浏覽器(qì)會(huì)把用(yòng)戶指§♥≈ 向到(dào) Location中指定的(de) URL。頭文(wén)件(j€©‍iàn)中的(de)所有(yǒu)信息在一(yī)次跳(tiào)轉中↑₩©✘都(dōu)是(shì)必需的(de)，£φ£×內(nèi)容部分(fēn)可(kě)以為(wèi)空(kōng)。不(bù)δ©管他(tā)們的(de)名 稱， 301♣δ和(hé) 302響應都(dōu)不(bù)會(h♠γ™uì)被緩存除非增加一(yī)個(gè)額外(wài)的(de)頭選©'"≠項，如(rú) Expires或者 Caλ♥← che-Control來(lái)指定它緩存。 <<©®δ;meat />元素的(de)刷新标簽≈•π和(hé)JavaScript也(yě)可(kě)以實現(xiàn)♠€ URL的(de)跳(tiào)轉，但(dàn)是(s♦ hì)如(rú)果你(nǐ)必須要(yào)跳(tiào)轉的(de)時(sh‍₹®☆í)候，最好(hǎo)的(de)方法就(jiù)是(shì)使用¥€(yòng)标準的(de) 3XXHTTP狀态代碼，這(zh ¶è)主要(yào)是(shì)為(wèi)了(le)确保“後退”按鈕可(k ☆↓ě)以正确地(dì)使用(yòng)。


  但(dàn)是(shì)要(yào)記住跳( →≥♣tiào)轉會(huì)降低(dī)用(yòng)戶®¶↓∏體(tǐ)驗。在用(yòng)戶和(hé) HTML文(wén)檔中間→$©×(jiān)增加一(yī)個(gè)跳(tiào)轉，會(huì)拖延頁面中≈±所有(yǒu)元素的(de)顯示，因為(wèi)在 HTML文(wén♥♦)件(jiàn)被加載前任何文(wén)件(jiàn)（圖像、  ‍®Flash等）都(dōu)不(bù)會(huì)被下(xiσ±•αà)載。


  有(yǒu)一(yī)種經常被網頁開(kāi∑↑)發者忽略卻往往十分(fēn)浪費(fèi)響↔♠應時(shí)間(jiān)的(de)跳(tiào)轉≥∞∑現(xiàn)象。 這(zhè)種現(xiàn)象發生(shēng)在≠↕當 URL本該有(yǒu)斜杠（ /）卻被忽略掉時(s<↑hí)。例如(rú)，當我們要(yào)訪問(wèn)httδβφp://astrology.yahoo.★♥com/astrology 時(shí)，→±←實際上(shàng)返回的(de)是(shì)一(yī)個(gè)包含Ω → 301代碼的(de)跳(tiào)轉，它指向的(de)是(→§shì) http://astrα€× ology.yahoo.com/astrol•↔ogy/  （注意末λσ尾的(de)斜杠）。在 Apache服務器(qì)中可(kě)以使用(yòn§÷<g) Alias 或者 mod_rewrite或者 th'☆e DirectorySlash來(lái) ✔避免。


  連接新網站(zh≈←☆àn)和(hé)舊(jiù)網站(zhàn)是(<§αδshì)跳(tiào)轉功能(néng)經常被用(yòng)到(dà ‍♠₽o)的(de)另一(yī)種情況。這(zhè)種情λ♠✘÷況 下(xià)往往要(yào)連接網站 ♥(zhàn)的(de)不(bù)同內(nèi)容然後根據用(yòng)戶的(d∑§ $e)不(bù)同類型（如(rú)浏覽器(qì)類型、λ¶₽₹用(yòng)戶賬号所屬類型）來(lái)進行(xíng)跳(✘ tiào)轉。使用(yòng)跳(tiào)轉來(lái$∞★π)實現(xiàn)兩個(gè)網站(zhàn)的(de)切換十分(fēn)簡單✘ ©✘，需要(yào)的(de)代碼量 也(yě)不(b×←β ù)多(duō)。盡管使用(yòng)這(zhè)種方法對(duì∑∞)于開(kāi)發者來(lái)說(shuō)可(kě)以降≥€≈低(dī)複雜(zá)程度，但(dàn)是(shì)它同樣降低(dī)★₽↓>用(yòng)戶體(tǐ)驗。一(yī)個(gè)可(kě)替代方€α法就(jiù)是(shì)如(rú)果兩者在同一(yī)台服務器 π(qì)上(shàng)時(shí)使用(yòng) Alias和(hé)♣  mod_rewrite和(hé)實現(xiàn)。如(Ωβσrú)果是(shì)因為(wèi)域名的(de)不(bù)同而采用×↓(yòng)跳(tiào)轉，那(nà)麽可(kě)以通(tōn•✘<∑g)過使用(yòng) Alias或者 mod_reβ♥wirte建立 CNAME（保存一(yī)個(gè)域名和(hé)另外(φ∏★wài)一(yī)個(gè)域名之間(jiā' ≈×n)關系的(de)DNS記錄）來(lái)替代。


4、可(kě)緩存的(de) AJAX

  Ajax 經常被提及的(de)一(™↔yī)個(gè)好(hǎo)處就(jiù)是(shì)由于其從(•​cóng)後台服務器(qì)傳輸信息 的(₩<de)異步性而為(wèi)用(yòng)戶帶π↑來(lái)的(de)反饋的(de)即時(shí)性。但(∏§‍®dàn)是(shì)，使用(yòng) Ajax并不(bù)能(nén©♠∏g)保證用(yòng)戶不(bù)會(huì)在等待異步的(de) Java§♣ Script和(hé) XML響應上(shàng)花(huā)費(fèi)時←α✘(shí)間(jiān)。在很(hěn)多(duō)應用(yòng)中，用(§≥βyòng)戶是(shì)否需要(yào)等待響應取決于 Ajax如(r±∞ú)何來(lái)使用(yòng)。例如(rú)，在一(yī)個(gè®×α←)基于 Web的(de) Email客戶端中，用(yòng)戶必須等待 A&÷₽jax返回符合他(tā)們條件(jiàn)的(de)郵件(j↕÷​iàn)查詢結果。記住一(yī)點，“異步”并不(bù)異味著(z  '≤he)“即時(shí)”，這(zhè) 很(hěn)重要(yàγ∏o)。


  為(wèi)了(le)提高(∑£≤gāo)性能(néng)，優化(huà) A¶→πjax響應是(shì)很(hěn)重要(yॣ₹o)的(de)。提高(gāo) Ajxa性能(néng)的(d‍£e)措施中最重要(yào)的(de)方法就(jiù)↔​>π是(shì)使響應具有(yǒu)可(kě÷​)緩存性，具體(tǐ)的(de)討(tǎo)論可(kě)β™以查看(kàn) Add an Expires or ♣שa Cache-Control Header。 其它的(de)幾條規則也(>≥Ωyě)同樣适用(yòng)于Ajax：

    Gizp 壓縮文(wén)件✘σα(jiàn)

    減少(shǎo) DNS£​​ε查找次數(shù)

    精簡 JavaScript ≈✘'

    避免跳(tià₽$♥♣o)轉

    配置 ETa₹♦gs


  讓我們來(lái)看(kànπ≈‌™)一(yī)個(gè)例子(zǐ)：一(yī)個(gè)€& ¥ Web2.0的(de) Email客戶端會(huì)使用(yòng) A→→jax來(lái)自(zì)動完成對(duì)用(yòng)戶地(dì)址薄₩≠♥的(de)下(xià)載。如(rú)果用(yòng)戶在上(sh↓™ àng)次使用(yòng)過 Email web應用(yòng)程序後沒有(‍λ£±yǒu)對(duì)地(dì)址薄作(zuò)任何的(σ♣≥<de)修改，而且 Ajax響應通(tōng)過 E≠‌∑xpire或者 Cacke-Control頭來'×✔(lái)實現(xiàn)緩存，那(nà)麽就(ji ≈♦≈ù)可(kě)以直接從(cóng)上(shàng)一§§£©(yī)次的(de)緩存中讀(dú)取地(dì)≠∞↑址薄 了(le)。必須告知(zhī)浏覽器(qì)是(shì)使用(y✘‍↔©òng)緩存中的(de)地(dì)址薄還(hái)是(shì)發送一(yī)<&個(gè)新的(de)請(qǐng)求。這(zhè)可(kě)以通÷>(tōng)過為(wèi)讀(dú)取地(>∞÷∏dì)址薄的(de) Ajax URL增加一(yī)個(gè)含有(yǒu✘↓&)上(shàng)次編輯時(shí)間(jiān)的(de)時(shí)↓¶§間(jiān)戳來(lái)實現(xiàn)，例如(rú)， &t=<∞Ω®11900241612等。如(rú)果地(dì)址薄在上(s↔β‌hàng)次下(xià)載後沒有(yǒu)被編輯≈↓δ↕過，時(shí)間(jiān) 戳就(jiù€•)不(bù)變，則從(cóng)浏覽器(♥εqì)的(de)緩存中加載從(cóng)而減少(sh ‍ǎo)了(le)一(yī)次 HTTP請(qǐng)求過程。如(rú)果用​™✘'(yòng)戶修改過地(dì)址薄，時(shí)間(jiān)戳就(ji☆•ù)會(huì)用(yòng)來(lái)确定新的(de) URL和(hé)÷✔緩存響應并不(bù)匹配，浏覽器(qì)就(jiù)會(huì)重要(↓≠yào)請(qǐng)求更新地(dì)址薄。

  即使你(nǐ™‍)的(de) Ajxa響應是(shì)動态生(shē♣☆π"ng)成的(de)，哪怕它隻适用(yòng)于一(yī)個(gè)用(<$‌yòng)戶，那(nà)麽它也(yě)應該被緩存起來(lái)。這(zh>©è)樣做(zuò) 可(kě)以使你(nǐπβδ)的(de) Web2.0應用(yòng)程序更加快(kuài)捷。


5、推遲加載內(nèi)容

  你(nǐ)可(k™​↕®ě)以仔細看(kàn)一(yī)下(xià)你(nǐ)的(de)網頁，問 <β₽(wèn)問(wèn)自(zì)己“哪些(xiē)內(nèi)容是(shì)☆¶頁面呈現(xiàn)時(shí) 所必需§↑☆✘首先加載的(de)？哪些(xiē)內(nèi)γ 容和(hé)結構可(kě)以稍後再加載？

  把整個(gè)過程按照(zh ≤₹£ào) onload事(shì)件(jiàn)分(fēn)隔成兩部分(fēn) π≥£， JavaScript是(shì)一(yī)個(gè)理(lǐ)€©‍©想的(de)選擇。例如(rú)，如(rú)果你(nǐ)有(yǒλ§u)用(yòng)于實現(xiàn)拖放(fàngγ←‍×)和(hé)動畫(huà)的(de) JavaS"≤×cript，那(nà)麽它就(jiù)以等待稍後加載，因為(β&≈wèi)頁面上(shàng)的(de)拖放(fàng♥←)元素是(shì)在初始化(huà)呈現(xiàn) 之後才發生(≈→≠shēng)的(de)。其它的(de)例如(rú)隐藏部分(fēn)的(deπ✘♥)內(nèi)容（用(yòng)戶操作(zuλ​ò)之後才顯現(xiàn)的(de)內(nèi)容）和(hé)處于折εε'疊部分(fēn)的(de)圖像也(yě)可(kě)以推遲加↔δ<載

  工(gōng)具→'可(kě)以節省你(nǐ)的(de)工(gōng)作(zuò)量： Y≥™ ÷UI Image Loader可(kě)以幫你(nǐ)推遲加載折疊部分(f™™ēn)的(de)圖片， YUI Get utility₽↔'₹是(shì)包含 JS和(hé) CSS的(de)便™♦∞β捷方法。比如(rú)你(nǐ)可(kě)以打開(kāi) Fi≠™&←rebug的(de) Net選項卡看(kàn)一(yī)下£∏♥γ(xià) Yahoo的(de)首頁。 ←&

  當性能(néng)目标和(hé)其σ ↓↑它網站(zhàn)開(kāi)發實踐一(yī)緻時(shí)就(j>♦↔iù)會(huì)相(xiàng)得(de)益彰。這(zhè)種£•→情況 下(xià)，通(tōng)過程序提高(gāo)網站(¶∞zhàn)性能(néng)的(de)方法告訴我們，在支持 Jav×‌aScript的(de)情況下(xià)，可(kě)以先去(qù)除用δλ✘(yòng)戶體(tǐ)驗，不(bù)過這(zhè)要(yào)保Ωε$證你(nǐ)的(de)網站(zhàn)在沒有(¶€yǒu) JavaScript也(yě)可‌φ'&(kě)以正常運行(xíng)。在确定頁面運行(xíng)正常後，再加載腳本™♦₽¥來(lái)實現(xiàn)如(rú)拖放(fà""ng)和(hé)動畫(huà)等更加花(huā)哨的(£≥÷de)效果。


6、預加載

  預加載和(hé)後加載看(kàn)起來(lái)£×σ✔似乎恰恰相(xiàng)反，但(dàn)實際上(sΩ÷hàng)預加載是(shì)為(wèi)了(l  π♥e)實 現(xiàn)另外(wài)一(yī)種目标。預☆‍ε加載是(shì)在浏覽器(qì)空(kōng)閑時(s÷÷λhí)請(qǐng)求将來(lái)可(kě)能(néng)會(hu↑♣↑✔ì)用(yòng)到(dào)的(de)頁面內(nèi)容（如(rú)圖₹©像、樣式表和(hé)腳本）。使用(yòng)這(zhè)種方法，當用™♣φ(yòng)戶要(yào)訪問(wèn)下(xià)一(yī)個(gè✘>™)頁面時(shí)，頁面中的(de)內(nèi)容 大(dà)部分(fē∞∞☆•n)已經加載到(dào)緩存中了(le)，因此可(kě)以大®≥ ★(dà)大(dà)改善訪問(wèn)速度。


下(xià)面提供了(le)幾種預加€∑載方法：

  無條件(jiàn)加載：觸發 onload事§¶(shì)件(jiàn)時(shí)，直接加載額外(wài)的(de)頁面​Ω ♣內(nèi)容。以 Google.com為(wèi)例，σ↓₽¥你(nǐ)可(kě)以看(kàn)一(yī)下(xià)它的(de) spi₹©<×rit image圖像是(shì)怎樣在 onloa♠Ω✘πd中加載的(de)。這(zhè)個(gè) spirit imλ≤age圖像在 google.com主頁中是(sh"β♦ì)不(bù)需要(yào)的(de)，但(dàn)是(shì)卻Ω‍'♣可(kě)以在搜索結果頁面中用(yòng)到(dào)它。 §α∞

有(yǒu)條件(jiàn)加載：根據用(yòng)戶的(d​♠e)操作(zuò)來(lái)有(yǒu)根據地(dì)判₹♦‌ 斷用(yòng)戶下(xià)面可(kě÷‍§¶)能(néng)去(qù)往的(de)頁面并相(xiàng)應的(de)預 ¶∏α¥加載頁面內(nèi)容。在 search.yaho≥σ♣≈o.com中你(nǐ)可(kě)以看(kàn)到(dào)如(rú)λ¶何在你(nǐ)輸入內(nèi)容時(shí)加載額外♠♦(wài)的(de)頁面內(nèi)容。

  有(yǒu)預期的(de)加載：載λ↕γα入重新設計(jì)過的(de)頁面時(shí)使用(yò>πλσng)預加載。這(zhè)種情況經常出現(xiàn)在頁₽≥♥面經過重新設計(jì)後用(yòng)戶抱怨“新的(de)頁面看(kàσ‍n)起來(lái)很(hěn)酷，但(dàn)是(shì✘✔ )卻比以前慢(màn)”。問(wèn)題可(kě)能(néng)出在 用(yòΩ≠§ng)戶對(duì)于你(nǐ)的(de)舊(jiù→¥)站(zhàn)點建立了(le)完整的(de)緩存，而對(duì)于新站(zh✘♣↓àn)點卻沒有(yǒu)任何緩存內(nèi)容。因此你(nǐ)可(kě)≈&以在訪問(wèn)新站(zhàn)之前就(ji€↕₹→ù)加載一(yī)部內(nèi)容來(lái)避免這(↓•​zhè)種結果的(de)出現(xiàn)。在你✘π(nǐ)的(de)舊(jiù)站(zhàn)中利用(yòn&'∞↓g) 浏覽器(qì)的(de)空(kōng)餘時(shí)π‍׶間(jiān)加載新站(zhàn)中用(y↑♦ ★òng)到(dào)的(de)圖像的(de)和(hé)腳本來(lá ☆‌"i)提高(gāo)訪問(wèn)速度。


7、減少(shǎo) DOM元素數(sh↕♣£ù)量

  一(yī)個(gè)複雜(zá)的(de)頁面©≠♠意味著(zhe)需要(yào)下(xià)載更多(duō)數(shù)據♠¥β♦，同時(shí)也(yě)意味著(zhe) JavaScri☆÷‍pt遍曆 DOM的(de)效率越慢(màn)。比如(rú)當你(nǐ &)增加一(yī)個(gè)事(shì)件(jiàn•←∑)句柄時(shí)在 500和(hé) 5000個(gèΩ±>ε) DOM元素中循環效果肯定是(shì)不(bù)一(yī)樣的(d'∑↕e)。

  大(dà)量的(de) ¶‌♣$DOM元素的(de)存在意味著(zhe)₩✘頁面中有(yǒu)可(kě)以不(bù)用(φ★↓δyòng)移除內(nèi)容隻需要(yào)替換元素标±$≠★簽就(jiù)可(kě)以精簡的(de)部分(fēn)。你(®≤‌♠nǐ)在頁面布局中使用(yòng)表格了(le)嗎€£(ma)？你(nǐ)有(yǒu)沒有(yǒu)僅僅為(wèi)了(le£€)布局而引入更多(duō)的(de) &‌™¶₩lt;div>元素呢(ne)？也(yě)σ'←許會(huì)存在一(yī)個(gè)适合或♥'者在語意是(shì)更貼切的(de)标簽可(₹≤kě)以供你(nǐ)使用(yòng)。

  YUI CSS u ×tilities 可(kě)以給你(nǐ♠‌)的(de)布局帶來(lái)巨大(dà)幫助： grids.♦∞≥$css可(kě)以幫你(nǐ)實現(xiàn)整體(tǐ)布局， f↓$§ont.css和(hé) reset.cs♥><★s可(kě)以幫助你(nǐ)移除浏覽器(qì)‌<  默認格式。它提供了(le)一(yī)個(gè)重新審視☆¶β≈(shì)你(nǐ)頁面中标簽 的(de)機(jī)會(huì)，比如(©÷rú)隻有(yǒu)在語意上(shàng)有(yǒu)意義時(shí)才使>'"←用(yòng) <div>，而不(bù)是(shì)因為(w₽≠èi)它具有(yǒu)換行(xíng)效果才使用(yòng)它。

  DOM 元素數(shα ‍ù)量很(hěn)容易計(jì)算(suàn)Ω​↑出來(lái)，隻需要(yào)在 Firebug∞←ε的(de)控制(zhì)台內(nèi)輸入：

document.getElements§σByTagName('*').length →Ω

  那(nà)麽多(duō)少(shǎo)個(gè) Ω∞♦"DOM元素算(suàn)是(shì)多(duō)呢(ne)？這(₹¶¥ zhè)可(kě)以對(duì)照(zhào)有(yǒu)很(hěn)好(hǎ¥‌​o)标記使用(yòng)的(de)類似頁面。比如(rú) Yahoo!主←↑≈÷頁是(shì)一(yī)個(gè)內(nèi)容非↔ 常多(duō)的(de)頁面，但(dàn)是(sh↑•πì)它隻使用(yòng)了(le) 700個(gè)元素（ HTML标簽）‍ 。


8、根據域名劃分(fēn)頁面內(nèi)容 ∑↓

  把頁面內(nèi)₽₹¶容劃分(fēn)成若幹部分(fēn)可(kě)以使你(nǐ)最≤♠ π大(dà)限度地(dì)實現(xiàn)平行(x≈≠∏íng)下(xià)載。由于 DNS查找帶來(lái)的(deσ¥)影(yǐng)響你(nǐ)首先要(yà♦∞£λo)确保你(nǐ)使用(yòng)的(de)域→♣名數(shù)量在 2個(gè)到(dào) 4個(gè)之間♠♥(jiān)。例如(rú)，你(nǐ)可(kě)以把✔→用(yòng)到(dào)的(de) HTML內(nèi)容קα♣和(hé)動态內(nèi)容放(fàngφλβ)在 http://www.ex♠δ$←ample.org/ 上(shàng)，而把頁Ω<₹面各種組件(jiàn)（圖片、腳本、 CSS)分(fē✘♥↓≥n)别存放(fàng)在 statics1.exa•×αmple.org和(hé) statics.example.org上(shà™✘★>ng)。

你(nǐ)可(kě)在 Tenni Theurer和(hé♠₹₩≤) Patty Chi合寫的(de)文(wén)≈↑₹章(zhāng) Maximizing Parallel Download<←®s in the Carpool Lane找到(dà γ‌÷o)更多(duō)相(xiàng)關信息。


9、使 iframe的(de)數(shù)量最小(x‍₩σiǎo)

  ifrmae 元素可(kě)以在父文α₩₽(wén)檔中插入一(yī)個(gè)新的(de)±& HTML文(wén)檔。了(le)解 iframε<>e的(de)工(gōng)作(zuò)理(lǐ)然後才能(néng‍✔)更加有(yǒu)效地(dì)使用(yòng)它，這(zhè)一(βφyī)點很(hěn)重要(yào)。


<iframe>優點：

解決加載緩慢(màn)的(de)第三方內(nèi©₽≈ε)容如(rú)圖标和(hé)廣告等的(de)₩≥加載問(wèn)題

Security sandbox

并行(xíng)加載腳本

<iframe>的(de)缺點：

即時(shí)內(nèi)容為(wèi)空€↔‌≈(kōng)，加載也(yě)需要(yào)時(shí)間(jiān) ‍±↔×

會(huì)阻止頁面加載

沒有(yǒu)語意


10、不(bù)要(yào)出現(xiàn) 404錯(cuò)₹λ‌誤

   HTTP 請 Ω♠ (qǐng)求時(shí)間(jiān)消耗₹≈是(shì)很(hěn)大(dà)的(de)，$λα因此使用(yòng) HTTP請(qǐng)求來(lái)獲得(de)一(yī>≥)個(gè)沒有(yǒu)用(yòng)處的(de)響應（例如(¥÷↔δrú) 404沒有(yǒu)找到(dào)β₽★頁面）是(shì)完全沒有(yǒu)必要(y☆↑ào)的(de)，它隻會(huì)降低(dī)用(yòn≤≠γg)戶體(tǐ)驗而不(bù)會(huì↑∏ε)有(yǒu)一(yī)點好(hǎo)處。

  有(yǒu)些(xi≥αē)站(zhàn)點把 404錯(cuò)誤響應頁面改為(wèi)“你¥ ↕(nǐ)是(shì)不(bù)是(shì)要(yà ≥©✔o)找 ***”，這(zhè)雖然改進了(le)用(yòng)戶體(tǐσ÷¥)驗但(dàn)是(shì)同樣也(yě)↕£ 會(huì)浪費(fèi)服務器(qì)資源（如(rú)‌≈​數(shù)據庫等）。最糟糕的(de) 情況↕₩≥☆是(shì)指向外(wài)部 JavaScript的(de)鏈接出現(x↔₽iàn)問(wèn)題并返回 404代碼。首先，這(zhè)種加載會( ¥↕ huì)破壞并行(xíng)加載；其次浏覽器(qì)會(huì)把試圖在返回的Ω ☆(de)404響應內(nèi)容中找到(dào)可(kě)能(néng)± 有(yǒu)用(yòng)的(de)部分(fēn)當作(zuò) J•÷‌avaScript代碼來(lái)執行(xíng)。

二、服務器(qì)部分(fēn) ₽¶♣∞

  • 使用(yòng)內(nèi)容分(fēn)發網絡 ★₽¶>
  • 為(wèi)文(wén)件(jiàn)頭指定Expire​¥s或Cache-Control
  • Gzip壓縮文(wén)件(jià™± n)內(nèi)容
  • 配置ETag
  • 盡早刷新輸出緩沖
  • 使用(yòng)GET來(lái)完成AJAπ≈X請(qǐng)求
  • 避免空(kōng)的(de)圖像來(lái)源

11、使用(yòng)內(nèi)容分(fēn)發δ'σ網絡 
  用(yòng)戶與你(nǐ)網站(zhàn)φσ★€服務器(qì)的(de)接近(jìn)程度會(huì)影("✔♥yǐng)響響應時(shí)間(jiān)的(de)長(c≈÷háng)短(duǎn)。把你(nǐ)的(de)網站(zhàn)內(nè←≈'Ωi)容分(fēn)散到(dào)多(duō)個(g♠εè)、處于不(bù)同地(dì)域位置的(de)服務器(q✔πì)上(shàng)可(kě)以加快(kuài)下(xià)載¶±¶♣速度。但(dàn)是(shì)首先我們應該做(zuò‌≥☆)些(xiē)什(shén)麽呢(ne)？
  按地(dì)域布置網站(zhàn)內(nè₹ ¥i)容的(de)第一(yī)步并不(bù)是(shì)要'≥(yào)嘗試重新架構你(nǐ)的(de)網站(zhàn)讓他(∑δtā)們在分(fēn)發服務器(qì)上(shàng₩✘")正常運行(xíng)。根據應用(yòng)的(de)需求→φ來(lái)改變網站(zhàn)結構，這(zhè)可(kěσ<)能(néng)會(huì)包括一(yī)些(xiē)比較複雜(zá)的(d¶•≥e)任 務，如(rú)在服務器(qì)間(  ↕jiān)同步Session狀态和(hé)合并數(shù)據庫更新等。要(y₽"♣πào)想縮短(duǎn)用(yòng)戶和(hé)↔∏↕φ內(nèi)容服務器(qì)的(de)距離(lí)，這(zhδ "εè)些(xiē)架構步驟可(kě)能(néng)§€₽$是(shì)不(bù)可(kě)避免的(de)。
  要(yào)記住，在終端用(yòng)戶的¥'"♦(de)響應時(shí)間(jiān)中有(yǒu)80%到δ≈(dào)90%的(de)響應時(shí)間(₽•σjiān)用(yòng)于下(xià)載圖像、樣式表、腳本、F₩ €lash等頁面內(nèi)容。這(zhè) ±就(jiù)是(shì)網站(zhàn)性能(nénσ<g)黃(huáng)金(jīn)守則。和(hé)重新設∏‌®計(jì)你(nǐ)的(de) 應用(yòng)程序架構這(z✔☆hè)樣比較困難的(de)任務相(xiàng)比，首先來(lái)分(fē∏•βn)布靜(jìng)态內(nèi)容會(huì)更好(hǎo)一(yī∏←↓)點。這(zhè)不(bù)僅會(huì)縮短(duǎn)響應​↓☆時(shí)間(jiān)，而且對(duì)于₹↓↕☆內(nèi)容分(fēn)發網絡來(lái)說(shuō)它更容易實現•≠(xiàn)。
  內(nèi)容分(fēn✘≥σ✘)發網絡（Content Delivery Network，CDN）是(sh←π↓ì)由一(yī)系列分(fēn)散到(dào) σΩ各個(gè)不(bù)同地(dì)理(lǐ)位置上(shàng)的( →®de)Web服務器(qì)組成的(de)，它提高(gāo)了(le)網站(®™ zhàn)內(nèi)容的(de)傳輸速度。用(yòng)于向用♦®(yòng)戶傳輸內(nèi)容的(de)服務器(qì)主要(α♣∑yào)是(shì)根據 和(hé)用(yòng)戶在網絡上"σ↕÷(shàng)的(de)靠近(jìn)程度來(lái)指定的(d™≥e)。例如(rú)，擁有(yǒu)最少(shǎo)網絡跳(tiào)數(₩Ωshù)（network hops）和(h↕♠é)響應速度最快(kuài)的(de)服務器(qì)會(huì)被選定。
  一(yī)些(xiē)大(dà)型的(d​ε₩e)網絡公司擁有(yǒu)自(zì)己的(de)CDN，但(dàγ↑n)是(shì)使用(yòng)像Akamai Techn ×ologies，Mirror Image Interne€¶↓∞t，或者Limelight Networks這(zhè)樣的(≈σde)CDN服務成本卻非常高(gāo)。對(duì)于剛剛起$  步的(de)企業(yè)和(hé)個(gè)人(ré<✔≠σn)網站(zhàn)來(lái)說(shuō)，可( ☆kě)能(néng)沒有(yǒu)使用(yòng)CDN的(de)₽γ成本預算(suàn)，但(dàn)是(shì)随著(zhe)目标用(yòng)✔‌£戶群的(de)不(bù)斷擴大(dà)和(hé)更加 全球化(≥☆±§huà)，CDN就(jiù)是(shì)實現(xiàn§≤β )快(kuài)速響應所必需的(de)了(<₹βle)。以Yahoo來(lái)說(shuō)，他(tā)δ↑©們轉移到(dào)CDN上(shàng)的(de)網站(z ♥hàn)程序靜(jìng)态內(nèi)容節省了(l₽≥e)終端用(yòng)戶20%以上(shàng)的‍♠→(de)響應時(shí)間(jiān)。使用(yòng)CD&←γ©N是(shì)一(yī)個(gè)隻需要(α≤yào)相(xiàng)對(duì)簡單地(dì)修改代碼實現(xiε₩¥àn)顯著改善網站(zhàn)訪問(wèn)速度的≠∞(de)方法。


12、為(wèi)文(wén)件(jiàn)頭指定Ex×↕pires或Cache-Control 
  這(zhè)條守則包括兩方面的(de)內(nè$→i)容：
對(duì)于靜(jìng)态內(nèi)§π≤∑容：設置文(wén)件(jiàn)頭過期時(shí)間(jiān)E↓↓≥☆xpires的(de)值為(wèi)“Never expire”（永不≤₩∏(bù)過期）
對(duì)于動态內(nèi)容：使用(y••òng)恰當的(de)Cache-Control文(wén)件(ji™‍àn)頭來(lái)幫助浏覽器(qì)進行(xíng)¶♠有(yǒu)條件(jiàn)的(de)請(qǐng)求
  網頁內(nèi)容設計(jì)現(xiàn)在÷÷σ越來(lái)越豐富，這(zhè)就(jiù)意味著(z✔ε≥ he)頁面中要(yào)包含更多(duō)的(de)腳本、樣式表、圖片和 ∑≠✘(hé)Flash。第一(yī)次訪問(wèn ≤)你(nǐ)頁面的(de)用(yòng)戶就(j"✘•iù)意味著(zhe)進行(xíng)多(duō)次的(de)HTTP請(q  ₩αǐng)求，但(dàn) 是(shì)通(tōng)過使用(yòngδ£‌©)Expires文(wén)件(jiàn)頭就(jiù)可(kě)↑Ω‌δ以使這(zhè)樣內(nèi)容具有(yǒu)緩存性。它避免了(le)接下(xΩ&ià)來(lái)的(de)頁面訪問(wèn)中不(bù)必要÷¶®γ(yào)的(de)HTTP請(qǐng)求。Exp ₽∏ires文(wén)件(jiàn)頭經常用(yòng)于圖像文(​↑∑wén)件(jiàn)， 但(dàn)是(s§"×hì)應該在所有(yǒu)的(de)內(nèi)π÷容都(dōu)使用(yòng)他(tā)，↓♣←包括腳本、樣式表和(hé)Flash等。
  浏覽器(qì)（和(hé)代理(lǐ)☆®）使用(yòng)緩存來(lái)減少(shǎo)HTTP ∏♣≈請(qǐng)求的(de)大(dà)小(xiǎo✔≤)和(hé)次數(shù)以加快(kuài£ β)頁面訪問(wèn)速度。Web服務器(qì)在HTTP響應中使 λ∞用(yòng)Expires文(wén)件(jiàn)↔↕<頭來(lái)告訴客戶端內(nèi)容需 要(∏↑$<yào)緩存多(duō)長(cháng)時(shí)¶•φ間(jiān)。下(xià)面這(zhè)個(gè)例子(zǐ)是(shì•∑ ')一(yī)個(gè)較長(cháng)時(shí)₽↑間(jiān)的(de)Expires文(wén ♥↔)件(jiàn)頭，它告訴浏覽器(qì)這(zhè)個₹δ✔(gè)響應直到(dào)2010年(ni∑πσán)4月(yuè)15日(rì)才過期。
      Expi≠βΩres: Thu, 15 Apr 2010 20✔β:00:00 GMT 
  如(rú)果你(‌‌nǐ)使用(yòng)的(de)是(shì)Apa‍₹♠che服務器(qì)，可(kě)以使用(yòng↓↑↔)ExpiresDefault來(lái)設定相(xiàng)對(du₩$ì)當前日(rì)期的(de)過期時(shí)間(jiān)。下(xi£₹γà)面這(zhè)個(gè)例子(zǐ)是(shì)使用(yònδσ↕g)ExpiresDefault來(lái)設定請(qǐng)求時(s₹£hí)間(jiān)後10年(nián)過期的(d¥$e)文(wén)件(jiàn)頭：
      Expα‍ iresDefault "access plus 10 years"&nb‌Ω☆sp;
  要(yào)切記，如(rú)果使用(yòng)了(lπβ®e)Expires文(wén)件(jiàn)頭，當頁面↑≠內(nèi)容改變時(shí)就(jiù)必須改變內(nèi)容的≤∞∏←(de)文(wén)件(jiàn)名。依Yahoo!來(lái)說(shuō♥₩×€)我們經常使用(yòng)這(zhè)樣的(de)步驟：在♣β內(nèi)容的(de)文(wén)件(j•≤iàn)名中加上(shàng)版 本号，如(rασú)yahoo_2.0.6.js。
  使用(yòng)Expires文(wén)件( ↔jiàn)頭隻有(yǒu)會(huì)在用(yòn"αφ₹g)戶已經訪問(wèn)過你(nǐ)的(de)網站(zhàn)後才會§↕(huì)起作(zuò)用(yòng)。當用(yòng)戶首次γ€÷≠訪問(wèn)你(nǐ)的(de)網站(zhàn)時(sh≤Ω&í)這(zhè)對(duì)減少(shǎ♣™o)HTTP請(qǐng)求次數(shù)來(lái<↕≥)說(shuō)是(shì)無效的(de)，因為(wèi)浏覽器(qì)β•α的(de)緩 存是(shì)空(kōng)的(de)。因此這→↓δ(zhè)種方法對(duì)于你(nǐ)網站(z☆₹∏hàn)性能(néng)的(de)改進情況要(yào)依據他(♦ ¥tā)們“預緩存”存在時(shí)對(duì)你(nǐ)頁面←£的(de)點擊頻(pín)率（“預緩存”中已經包含了(le)頁面中∏®的(de)所有(yǒu)內(nèi)容）。 Yahoo!建立了&↕₹(le)一(yī)套測量方法，我們發現(xiàn)所有(yǒu)™ ∞↑的(de)頁面浏覽量中有(yǒu)75~85%都(dōu)有(yǒu)“預緩存Ωλ”。通(tōng)過使用(yòng)Expires文(wén)件(ji£®☆àn)頭，增加了(le)緩存在浏覽器(qì)中內(nè☆₹λi)容的(de) 數(shù)量，并且可(kě)以在用≈Ω£≤(yòng)戶接下(xià)來(lái)的(de)請(qǐ‍>§γng)求中再次使用(yòng)這(zhè)些(xiē)內(n$≤èi)容，這(zhè)甚至都(dōu)不(bù)需要(yàΩ£‍o)通(tōng)過用(yòng)戶發送一(yī≥φγ$)個(gè)字節的(de)請(qǐng)求。γ"∏→