1. 首頁
  2. 新聞資訊

新聞資訊

13 2014 03月(yuè)

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

by DareWe

Yahoo!的(de) Exceptional Performance團隊為(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ì) 、 CΩSS 、 JavaScript 、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)求的(d→e)次數(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)是(shì)通(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)對(duì)麻煩點，但(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é) background-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) HTT→P請(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ì)增加頁面的(d∏e)大(dà) 小(xiǎo)。把內(nèi)聯圖像放(fàng)到(dào)樣式表（可(kě)緩存）中可(kě)以減少(shǎ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òng)戶等待時(shí)間(jiān)的(de)最重♣要(yào)的(de)方法。 如(rú)同 Tenni Theurer的(de)他(tā)的(de)博客 Browser Cahe Usage - Expos✘ed!中所說(shuō)， HTTP請(qǐng)求在無緩存情況下(xià)占去(qù)了(le) 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.yaho​o.com 時(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) ISP提供商或者本地(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)軟 Windows系統中 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ōn‌g)，它在注冊表中的(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) netδwork.dnsCacheExpiration（ Fasterfox把這(zhè)個(gè)選項改為(wèi)了(le) 1小(xiǎo)時(βshí)）。


  當客戶端中的(de) DNS緩存都(dōu)為(wèi)空(kōng)時(shí)（浏覽器(qì)和(hé)操作(zuò)系統都(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)。這(zhè)種結果就(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

      Location: http://example.com/newuri

      Content-Type: text/html

  浏覽器(qì)會(huì)把用(yòng)戶指向到(dào) Location中指定的(de) URL。→頭文(wén)件(jià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ù)會(huì)被緩存除非增ε加一(yī)個(gè)額外(wài)的(de)頭選項，如(rú) Expires或者 Cache-Control來(lái)指定它緩存。 <meat />元 素的(de)刷新标簽和(hé)JavaScript也(yě)可(kě)以實現(xiàn) URL的(de)跳(tiào)轉，但(dà©n)是(shì)如(rú)果你(nǐ)必須要(yào)跳(tiào)轉的(de)時(shí)候，最好(hǎo<)的(de)方法就(jiù)是(shì)使用(yòng)标準的(de) 3XXHTTP狀态代碼，這(zhè)主要(yào)是(s₩hì)為(wèi)了(le)确保“後退”按鈕可(kě)以正确地(dì)使用(yòng)。


  但(dàn)是(shì)要(yào)記住跳(tiào)轉會(huì)降低(dī)用(yòng)戶體(tǐ)驗。在用(yòng)戶和(hé) HT$ML文(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)斜杠（ /）®卻被忽略掉時(shí)。例如(rú)，當我們要(yào)訪問(wèn)http://astrology.yahoo.com/astrology 時(shí)，實際上(sh>àng)返回的(de)是(shì)一(yī)個(gè)包含 301代碼的(de)跳(tiào)轉，它指向的(de)♦是(shì) http://astrology.yahoo.com/astrology/ ±; （注意末尾的(de)斜杠）。在 Apache服務器(qì)中可(kě)以使用(yòng) Alias 或者 mod_rewrite或α者 the 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)戶的(de)不(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♠ōng)過使用(yòng) Alias或者 mod_rewirte建立 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éng)保證用(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)戶必須等待 Ajax返回符合他(tā)們條件(jiàn)的(de)郵件(jiàn)查詢結果。記住一(yī)點，“異步”™并不(bù)異味著(zhe)“即時(shí)”，這(zhè) 很(hěn)重要(yào)。


  為(wèi)了(le)提高(gāo)性能(néng)，優化(huà) Ajax響應是(shì)很(hěn)重要(yào)的(de)。提₹高(gāo) Ajxa性能(néng)的(de)措施中最重要(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)轉

    配置 ETags


  讓我們來(lái)看(kàn)一(yī)個(gè)例子(zǐ)：一(yī)個(gè) Web2.0的(de) Email客戶端會(huì)使用(yòng) Ajax來(→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)過 Expire或者 Cacke-C​ontrol頭來(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ì)址薄在上(shà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) JavaScript，≥那(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ò)量： YUI Image Loader可(kě)以幫↕你(nǐ)推遲加載折疊部分(fēn)的(de)圖片， YUI Get utility是(shì)包含 JS和(hé) CSS的(d♠e)便捷方法。比如(rú)你(nǐ)可(kě)以打開(kāi) Firebug的(de) Net選項卡看(kàn↓)一(yī)下(xià) Yahoo的(de)首頁。

  當性能(néng)目标和(hé)其它網站(zhàn)開(kāi)發實踐一(yī)緻↓時(shí)就(jiù)會(huì)相(xiàng)得(de)益彰。這(zhè)種情況 下(xià)，通(tōng)過程序提高(gāo)網站(zhàn)性能( néng)的(de)方法告訴我們，在支持 JavaScript的(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)實際上(shàng)預加載是(shì)為(wèi)了(le)實 現(x≤iàn)另外(wài)一(yī)種目标。預加載是(shì)在浏覽器(qì)空(kōng)閑時(shí)請(qǐng)求将來(lái)可(kě)能(nén→g)會(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) spirit image圖像是(shì)怎樣在 onload中加載的(de)。這(zhè)個(gè) spirit image圖像在 ×google.com主頁中是(shì)不(bù)需要(yào)的(de)，但(dàn)是(shì)卻可(kě)以在搜索結果頁面中用(yòn±g)到(dào)它。

有(yǒu)條件(jiàn)加載：根據用(yòng)戶的(de)操作(zuò)來(lái)有(yǒu)根據地(dì)判斷用(yòng)戶下(xi≈à)面可(kě)能(néng)去(qù)往的(de)頁面并相(xiàng)應的(de)預 加載頁面內(nèi)容。在 s↑earch.yahoo.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òng) 浏覽器(qì)的(de)空(kōng)餘時(shí)間(jiān)加載新站(zhàn)中用(yòn↔g)到(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) JavaScript遍曆 DOM的(de)效率越慢(màn)。比如(rú)當你(nǐ)增加一(yī)個(gè)事(shì)件(jiàn)句柄時(shí)在 500和(hé) 50♦00個(gè) DOM元素中循環效果肯定是(shì)不(bù)一(yī)樣的(de)。

  大(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) <div>元素呢(ne)？也(yě)許會(huì)存在一(yī)個(gè)适合或者在語意是(shì)更貼切ε的(de)标簽可(kě)以供你(nǐ)使用(yòng)。

  YUI CSS utilities 可(kě)以給你(nǐ)的(de)布局帶來(lái)巨大(dà)幫助： grids.♥css可(kě)以幫你(nǐ)實現(xiàn)整體(tǐ)布局， font.css和(hé) reset.css可(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的(d✘e)控制(zhì)台內(nèi)輸入：

document.getElementsByTagName('*').length

  那(nà)麽多(duō)少(shǎo)個(gè) DOM元素算(suàn)是(s>hì)多(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)在&♦nbsp;http://www.example.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 Pa₩rallel Downloads in the Carpool Lane找到(dào)更多(duō)相(xiàn™g)關信息。


9、使 iframe的(de)數(shù)量最小(xiǎo)

  ifrmae 元素可(kě)以在父文(wén)檔中插入一(yī)個(gè)新的(de) HTML文(wén)檔。了(l•e)解 iframe的(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òng)戶體(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)鏈接出現(xià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ò) JavaScript代碼來(lái)執行(xíng)。✘

二、服務器(qì)部分(fēn)

  • 使用(yòng)內(nèi)容分(fēn)發網絡
  • 為(wèi)文(wén)件(jiàn)頭指定Expires或Cache-Control &
  • Gzip壓縮文(wén)件(jiàn)內(nèi)容
  • 配置ETag
  • 盡早刷新輸出緩沖
  • 使用(yòng)GET來(lái)完成AJAX請(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)長(chá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 á)的(de)任 務，如(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à)載圖像、樣式表、腳本、Flash等頁面內(nèi)容。這(zhè)就(jiù)是(shì)網站(zhàn)性能(néng)黃(huáng)金(jī≈n)守則。和(hé)重新設計(jì)你(nǐ)的(de) 應用(yòng)程序架構這(zhè)樣比較困難的(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)指定的(de)。例如(rú)，擁有(yǒu)最少(shǎo)網絡跳(tiào)數(✔shù)（network hops）和(hé)響應速度最快(kuài)的(de)服務器(qì)會(huì)被選定。
  一(yī)些(xiē)大(dà)型的(de)網絡公司擁有(yǒu)自(zì)己的(de)CDN，但(dàn)是(shì)使用(yòng)像Akamai Technol<ogies，Mirror Image Internet，或者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)網站(zhàn)程序靜(jìng)态內(nèi)容β節省了(le)終端用(yòng)戶20%以上(shàng)的(de)響應時(shí)間(jiān)。使用(yòng)CDN是(shì)一(yī)個(gè)隻需要(yào)相(xiàng )對(duì)簡單地(dì)修改代碼實現(xiàn)顯著改善網站(zhàn)訪問(wèn)速度的(de)方法。


12、為(wèi)文(wén)件(jiàn)頭指定Expires或Cache-Control 
  這(zhè)條守則包括兩方面的(de)內(nèi)容：
對(duì)于靜(jìng)态內(nèi)容：設置文(wén)件(jiàn)頭過期時(shí)間(jiān)Expires的(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ù)¶意味著(zhe)頁面中要(yào)包含更多(duō)的(de)腳本、樣式表、圖片和(hé)Flash。第‌一(yī)次訪問(wèn)你(nǐ)頁面的(de)用(yòng)戶就(jiù)意味著(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)接下(xià)來(lái)的(de)頁面訪問≥(wèn)中不(bù)必要(yào)的(de)HTTP請(qǐng)求。Expires文(wén)件(j™iàn)頭經常用(yòng)于圖像文(wén)件(jiàn)， 但(dàn)是(shì)應該在所有(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)E₽xpires文(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ì)才過期。
      Expires: Thu, 15 Apr 2010 20:00:00 GMT 
  如(rú)果你(nǐ)使用(yòng)的(de)是(shì)Apache服務器(qì)，可(kě)以使用(yòng)ExpiresDefault來(lái¶)設定相(xiàng)對(duì)當前日(rì)期的(de)過期時(shí)間(jiān)。下(xià)面這(zhè)個(gè)例子(zǐ)是(shì)使用(yòng)Expire sDefault來(lái)設定請(qǐng)求時(shí)間(jiān)後10年(nián)過期的(de)文(wén) 件(jiàn)頭：
      ExpiresDefault "access plus 10 years" 
  要(yào)切記，如(rú)果使用(yòng)了(le)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)件(jiàn)名中加上(shàng)版 本号，如(rú)yahoo_2☆.0.6.js。
  使用(yòng)Expires文(wén)件(jiàn)頭隻有(yǒu)會(huì)在用(yòng)戶已經訪問(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≠ǐ)網站(zhà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)求。