[轉載]雅虎35條優化黃金守則（一(yī)）
Yahoo!的 Exceptional Performance團隊爲改善 Web性能帶來最佳實踐。他們爲此進行了一(yī)系列的實驗、開(kāi)發了各種工(gōng)具、寫了大(dà)量的文章和博客并在各種會議上參與探讨。最佳實踐的核心就是旨在提高網站性能。總結出了一(yī)系列可以提高網站速度的方法。可以分(fēn)爲 7大(dà)類 35條。包括内容 、服務器 、 CSS 、 JavaScript 、Cookie 、圖片 、移動應用 ，七部分(fēn)。
一(yī)、内容部分(fēn)
- 盡量減少 HTTP請求
- 減少 DNS查找
- 避免跳轉
- 緩存 Ajxa
- 推遲加載
- 提前加載
- 減少 DOM元素數量
- 用域名劃分(fēn)頁面内容
- 使 frame數量最少
-
避免 404錯誤
1、盡量減少 HTTP請求次數
終端用戶響應的時間中(zhōng)，有 80%用于下(xià)載各項内容。這部分(fēn)時間包括下(xià)載頁面中(zhōng)的圖像、樣式表、腳本、 Flash等。通過減少頁面中(zhōng)的元素可以減少 HTTP請求的次數。這是提高網頁速度的關鍵步驟。
減少頁面組件的方法其實就是簡化頁面設計。那麽有沒有一(yī)種方法既能保持頁面内容的豐富性又(yòu)能達到加快響應時間的目的呢？這裏有幾條減少HTTP請求次數同時又(yòu)可能保持頁面内容豐富的技術。
合并文件是通過把所有的腳本放(fàng)到一(yī)個文件中(zhōng)來減少 HTTP請求的方法，如可以簡單地把所有的 CSS文件都放(fàng)入一(yī)個樣式表中(zhōng)。當腳本或者樣式表在不同頁面中(zhōng)使用時需要做不同的修 改，這可能會相對麻煩點，但即便如此也要把這個方法作爲改善頁面性能的重要一(yī)步。
CSS Sprites是減少圖像請求的有效方法。把所有的背景圖像都放(fàng)到一(yī)個圖片文件中(zhōng)，然後通過 CSS的 background-image和 background-position屬性來顯示圖片的不同部分(fēn)；
圖片地圖是把多張圖片整合到一(yī)張圖片中(zhōng)。雖然文件的總體(tǐ)大(dà)小(xiǎo)不會改變，但是可 以減少 HTTP請求次數。圖片地圖隻有在圖片的所有組成部分(fēn)在頁面中(zhōng)是緊挨在一(yī)起的時候才能 使用，如導航欄。确定圖片的坐标和可能會比較繁瑣且容易出錯，同時使用圖片地圖導航也不具有可讀性，因此不推薦這種方法；
内聯圖像是使用 data:URL scheme的方法把圖像數據加載頁面中(zhōng)。這可能會增加頁面的大(dà) 小(xiǎo)。把内聯圖像放(fàng)到樣式表（可緩存）中(zhōng)可以減少 HTTP請求同時又(yòu)避免增加頁面文件的大(dà)小(xiǎo)。但是内聯圖像現在還沒有得到主流浏覽器的 支持。
減少頁面的 HTTP請求次數是你首先要做的一(yī)步。這是改進首次訪問用戶等待時間的最重要的方法。 如同 Tenni Theurer的他的博客 Browser Cahe Usage - Exposed!中(zhōng)所說， HTTP請求在無緩存情況下(xià)占去(qù)了 40%到 60%的響應時間。讓那些初次訪問你網站的人獲得更加快速的體(tǐ)驗吧！
2、減少 DNS查找次數
域名系統（ DNS）提供了域名和 IP的對應關系，就像電話(huà)本中(zhōng)人名和他們的電話(huà)号碼的關系一(yī)樣。當你在浏覽器地址欄中(zhōng) 輸入 www.yahoo.com 時， DNS解析服務器就會返回這個域名對應的 IP地址。 DNS解析的過程同樣也是需要時間的。一(yī)般情況下(xià)返回給定域名對應的 IP地址會花費(fèi) 20到 120毫秒的時間。而且在這個過程中(zhōng)浏覽器什麽都不會做直到 DNS查找完畢。
緩存 DNS查找可以改善頁面性能。這種緩存需要一(yī)個特定的緩存服務器，這種服務器一(yī)般屬于用戶的 ISP提供商(shāng)或者本地局域網控制，但是它同樣會在用戶使用的計算機上産生(shēng)緩存。 DNS信息會保留在操作系統的 DNS緩存中(zhōng)（微軟 Windows系統中(zhōng) DNS Client Service）。大(dà)多數浏覽器有獨立于操作系統以外(wài)的自己的緩存。由于浏覽器有自己的緩存記錄，因此在一(yī)次請求中(zhōng)它不會受到操作系統的影響。
Internet Explorer 默認情況下(xià)對 DNS查找記錄的緩存時間爲 30分(fēn)鍾，它在注冊表中(zhōng)的鍵值爲 DnsCacheTimeout。 Firefox對 DNS的查找記錄緩存時間爲 1分(fēn)鍾，它在配置文件中(zhōng)的選項爲 network.dnsCacheExpiration（ Fasterfox把這個選項改爲了 1小(xiǎo)時）。
當客戶端中(zhōng)的 DNS緩存都爲空時（浏覽器和操作系統都爲空）， DNS查找的次數和頁面中(zhōng)主機名的數量相同。這其中(zhōng)包括頁面中(zhōng) URL、圖片、腳本文件、樣式表、Flash對象等包含的主機名。減少主機名的數量可以減少DNS查找次數。
減少主機名的數量還可以減少頁面中(zhōng)并行下(xià)載的數量。減少 DNS查找次數可以節省響應時間，但是減少并行下(xià)載卻會增加響應時間。我(wǒ)(wǒ)的指導原則是 把這些頁面中(zhōng)的内容分(fēn)割成至少兩部分(fēn)但不超過四部分(fēn)。這種結果就是在減少 DNS查找次數和保持較高程度并行下(xià)載兩者之間的權衡了。
3、避免跳轉
跳轉是使用 301和 302代碼實現的。下(xià)面是一(yī)個響應代碼爲 301的 HTTP頭：
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
浏覽器會把用戶指向到 Location中(zhōng)指定的 URL。頭文件中(zhōng)的所有信息在一(yī)次跳轉中(zhōng)都是必需的，内容部分(fēn)可以爲空。不管他們的名 稱， 301和 302響應都不會被緩存除非增加一(yī)個額外(wài)的頭選項，如 Expires或者 Cache-Control來指定它緩存。 <meat />元素的刷新标簽和JavaScript也可以實現 URL的跳轉，但是如果你必須要跳轉的時候，最好的方法就是使用标準的 3XXHTTP狀态代碼，這主要是爲了确保“後退”按鈕可以正确地使用。
但是要記住跳轉會降低用戶體(tǐ)驗。在用戶和 HTML文檔中(zhōng)間增加一(yī)個跳轉，會拖延頁面中(zhōng)所有元素的顯示，因爲在 HTML文件被加載前任何文件（圖像、 Flash等）都不會被下(xià)載。
有一(yī)種經常被網頁開(kāi)發者忽略卻往往十分(fēn)浪費(fèi)響應時間的跳轉現象。 這種現象發生(shēng)在當 URL本該有斜杠（ /）卻被忽略掉時。例如，當我(wǒ)(wǒ)們要訪問http://astrology.yahoo.com/astrology 時，實際上返回的是一(yī)個包含 301代碼的跳轉，它指向的是 http://astrology.yahoo.com/astrology/ （注意末尾的斜杠）。在 Apache服務器中(zhōng)可以使用 Alias 或者 mod_rewrite或者 the DirectorySlash來避免。
連接新網站和舊(jiù)網站是跳轉功能經常被用到的另一(yī)種情況。這種情況 下(xià)往往要連接網站的不同内容然後根據用戶的不同類型（如浏覽器類型、用戶賬号所屬類型）來進行跳轉。使用跳轉來實現兩個網站的切換十分(fēn)簡單，需要的代碼量 也不多。盡管使用這種方法對于開(kāi)發者來說可以降低複雜(zá)程度，但是它同樣降低用戶體(tǐ)驗。一(yī)個可替代方法就是如果兩者在同一(yī)台服務器上時使用 Alias和 mod_rewrite和實現。如果是因爲域名的不同而采用跳轉，那麽可以通過使用 Alias或者 mod_rewirte建立 CNAME（保存一(yī)個域名和另外(wài)一(yī)個域名之間關系的DNS記錄）來替代。
4、可緩存的 AJAX
Ajax 經常被提及的一(yī)個好處就是由于其從後台服務器傳輸信息 的異步性而爲用戶帶來的反饋的即時性。但是，使用 Ajax并不能保證用戶不會在等待異步的 JavaScript和 XML響應上花費(fèi)時間。在很多應用中(zhōng)，用戶是否需要等待響應取決于 Ajax如何來使用。例如，在一(yī)個基于 Web的 Email客戶端中(zhōng)，用戶必須等待 Ajax返回符合他們條件的郵件查詢結果。記住一(yī)點，“異步”并不異味着“即時”，這 很重要。
爲了提高性能，優化 Ajax響應是很重要的。提高 Ajxa性能的措施中(zhōng)最重要的方法就是使響應具有可緩存性，具體(tǐ)的讨論可以查看 Add an Expires or a Cache-Control Header。 其它的幾條規則也同樣适用于Ajax：
Gizp 壓縮文件
減少 DNS查找次數
精簡 JavaScript
避免跳轉
配置 ETags
讓我(wǒ)(wǒ)們來看一(yī)個例子：一(yī)個 Web2.0的 Email客戶端會使用 Ajax來自動完成對用戶地址薄的下(xià)載。如果用戶在上次使用過 Email web應用程序後沒有對地址薄作任何的修改，而且 Ajax響應通過 Expire或者 Cacke-Control頭來實現緩存，那麽就可以直接從上一(yī)次的緩存中(zhōng)讀取地址薄 了。必須告知(zhī)浏覽器是使用緩存中(zhōng)的地址薄還是發送一(yī)個新的請求。這可以通過爲讀取地址薄的 Ajax URL增加一(yī)個含有上次編輯時間的時間戳來實現，例如， &t=11900241612等。如果地址薄在上次下(xià)載後沒有被編輯過，時間 戳就不變，則從浏覽器的緩存中(zhōng)加載從而減少了一(yī)次 HTTP請求過程。如果用戶修改過地址薄，時間戳就會用來确定新的 URL和緩存響應并不匹配，浏覽器就會重要請求更新地址薄。
即使你的 Ajxa響應是動态生(shēng)成的，哪怕它隻适用于一(yī)個用戶，那麽它也應該被緩存起來。這樣做 可以使你的 Web2.0應用程序更加快捷。
5、推遲加載内容
你可以仔細看一(yī)下(xià)你的網頁，問問自己“哪些内容是頁面呈現時 所必需首先加載的？哪些内容和結構可以稍後再加載？
把整個過程按照 onload事件分(fēn)隔成兩部分(fēn)， JavaScript是一(yī)個理想的選擇。例如，如果你有用于實現拖放(fàng)和動畫的 JavaScript，那麽它就以等待稍後加載，因爲頁面上的拖放(fàng)元素是在初始化呈現 之後才發生(shēng)的。其它的例如隐藏部分(fēn)的内容（用戶操作之後才顯現的内容）和處于折疊部分(fēn)的圖像也可以推遲加載
工(gōng)具可以節省你的工(gōng)作量： YUI Image Loader可以幫你推遲加載折疊部分(fēn)的圖片， YUI Get utility是包含 JS和 CSS的便捷方法。比如你可以打開(kāi) Firebug的 Net選項卡看一(yī)下(xià) Yahoo的首頁。
當性能目标和其它網站開(kāi)發實踐一(yī)緻時就會相得益彰。這種情況 下(xià)，通過程序提高網站性能的方法告訴我(wǒ)(wǒ)們，在支持 JavaScript的情況下(xià)，可以先去(qù)除用戶體(tǐ)驗，不過這要保證你的網站在沒有 JavaScript也可以正常運行。在确定頁面運行正常後，再加載腳本來實現如拖放(fàng)和動畫等更加花哨的效果。
6、預加載
預加載和後加載看起來似乎恰恰相反，但實際上預加載是爲了實 現另外(wài)一(yī)種目标。預加載是在浏覽器空閑時請求将來可能會用到的頁面内容（如圖像、樣式表和腳本）。使用這種方法，當用戶要訪問下(xià)一(yī)個頁面時，頁面中(zhōng)的内容 大(dà)部分(fēn)已經加載到緩存中(zhōng)了，因此可以大(dà)大(dà)改善訪問速度。
下(xià)面提供了幾種預加載方法：
無條件加載：觸發 onload事件時，直接加載額外(wài)的頁面内容。以 Google.com爲例，你可以看一(yī)下(xià)它的 spirit image圖像是怎樣在 onload中(zhōng)加載的。這個 spirit image圖像在 google.com主頁中(zhōng)是不需要的，但是卻可以在搜索結果頁面中(zhōng)用到它。
有條件加載：根據用戶的操作來有根據地判斷用戶下(xià)面可能去(qù)往的頁面并相應的預 加載頁面内容。在 search.yahoo.com中(zhōng)你可以看到如何在你輸入内容時加載額外(wài)的頁面内容。
有預期的加載：載入重新設計過的頁面時使用預加載。這種情況經常出現在頁面經過重新設計後用戶抱怨“新的頁面看起來很酷，但是卻比以前慢(màn)”。問題可能出在 用戶對于你的舊(jiù)站點建立了完整的緩存，而對于新站點卻沒有任何緩存内容。因此你可以在訪問新站之前就加載一(yī)部内容來避免這種結果的出現。在你的舊(jiù)站中(zhōng)利用 浏覽器的空餘時間加載新站中(zhōng)用到的圖像的和腳本來提高訪問速度。
7、減少 DOM元素數量
一(yī)個複雜(zá)的頁面意味着需要下(xià)載更多數據，同時也意味着 JavaScript遍曆 DOM的效率越慢(màn)。比如當你增加一(yī)個事件句柄時在 500和 5000個 DOM元素中(zhōng)循環效果肯定是不一(yī)樣的。
大(dà)量的 DOM元素的存在意味着頁面中(zhōng)有可以不用移除内容隻需要替換元素标簽就可以精簡的部分(fēn)。你在頁面布局中(zhōng)使用表格了嗎(ma)？你有沒有僅僅爲了布局而引入更多的 <div>元素呢？也許會存在一(yī)個适合或者在語意是更貼切的标簽可以供你使用。
YUI CSS utilities 可以給你的布局帶來巨大(dà)幫助： grids.css可以幫你實現整體(tǐ)布局， font.css和 reset.css可以幫助你移除浏覽器默認格式。它提供了一(yī)個重新審視你頁面中(zhōng)标簽 的機會，比如隻有在語意上有意義時才使用 <div>，而不是因爲它具有換行效果才使用它。
DOM 元素數量很容易計算出來，隻需要在 Firebug的控制台内輸入：
document.getElementsByTagName('*').length
那麽多少個 DOM元素算是多呢？這可以對照有很好标記使用的類似頁面。比如 Yahoo!主頁是一(yī)個内容非常多的頁面，但是它隻使用了 700個元素（ HTML标簽）。
8、根據域名劃分(fēn)頁面内容
把頁面内容劃分(fēn)成若幹部分(fēn)可以使你最大(dà)限度地實現平行下(xià)載。由于 DNS查找帶來的影響你首先要确保你使用的域名數量在 2個到 4個之間。例如，你可以把用到的 HTML内容和動态内容放(fàng)在 http://www.example.org/ 上，而把頁面各種組件（圖片、腳本、 CSS)分(fēn)别存放(fàng)在 statics1.example.org和 statics.example.org上。
你可在 Tenni Theurer和 Patty Chi合寫的文章 Maximizing Parallel Downloads in the Carpool Lane找到更多相關信息。
9、使 iframe的數量最小(xiǎo)
ifrmae 元素可以在父文檔中(zhōng)插入一(yī)個新的 HTML文檔。了解 iframe的工(gōng)作理然後才能更加有效地使用它，這一(yī)點很重要。
<iframe>優點：
解決加載緩慢(màn)的第三方内容如圖标和廣告等的加載問題
Security sandbox
并行加載腳本
<iframe>的缺點：
即時内容爲空，加載也需要時間
會阻止頁面加載
沒有語意
10、不要出現 404錯誤
HTTP 請求時間消耗是很大(dà)的，因此使用 HTTP請求來獲得一(yī)個沒有用處的響應（例如 404沒有找到頁面）是完全沒有必要的，它隻會降低用戶體(tǐ)驗而不會有一(yī)點好處。
有些站點把 404錯誤響應頁面改爲“你是不是要找 ***”，這雖然改進了用戶體(tǐ)驗但是同樣也會浪費(fèi)服務器資(zī)源（如數據庫等）。最糟糕的 情況是指向外(wài)部 JavaScript的鏈接出現問題并返回 404代碼。首先，這種加載會破壞并行加載；其次浏覽器會把試圖在返回的404響應内容中(zhōng)找到可能有用的部分(fēn)當作 JavaScript代碼來執行。
二、服務器部分(fēn)
- 使用内容分(fēn)發網絡
- 爲文件頭指定Expires或Cache-Control
- Gzip壓縮文件内容
- 配置ETag
- 盡早刷新輸出緩沖
- 使用GET來完成AJAX請求
-
避免空的圖像來源
11、使用内容分(fēn)發網絡
用戶與你網站服務器的接近程度會影響響應時間的長短。把你的網站内容分(fēn)散到多個、處于不同地域位置的服務器上可以加快下(xià)載速度。但是首先我(wǒ)(wǒ)們應該做些什麽呢？
按地域布置網站内容的第一(yī)步并不是要嘗試重新架構你的網站讓他們在分(fēn)發服務器上正常運行。根據應用的需求來改變網站結構，這可能會包括一(yī)些比較複雜(zá)的任 務，如在服務器間同步Session狀态和合并數據庫更新等。要想縮短用戶和内容服務器的距離(lí)，這些架構步驟可能是不可避免的。
要記住，在終端用戶的響應時間中(zhōng)有80%到90%的響應時間用于下(xià)載圖像、樣式表、腳本、Flash等頁面内容。這就是網站性能黃金守則。和重新設計你的 應用程序架構這樣比較困難的任務相比，首先來分(fēn)布靜态内容會更好一(yī)點。這不僅會縮短響應時間，而且對于内容分(fēn)發網絡來說它更容易實現。
内容分(fēn)發網絡（Content Delivery Network，CDN）是由一(yī)系列分(fēn)散到各個不同地理位置上的Web服務器組成的，它提高了網站内容的傳輸速度。用于向用戶傳輸内容的服務器主要是根據 和用戶在網絡上的靠近程度來指定的。例如，擁有最少網絡跳數（network hops）和響應速度最快的服務器會被選定。
一(yī)些大(dà)型的網絡公司擁有自己的CDN，但是使用像Akamai Technologies，Mirror Image Internet，或者Limelight Networks這樣的CDN服務成本卻非常高。對于剛剛起步的企業和個人網站來說，可能沒有使用CDN的成本預算，但是随着目标用戶群的不斷擴大(dà)和更加 全球化，CDN就是實現快速響應所必需的了。以Yahoo來說，他們轉移到CDN上的網站程序靜态内容節省了終端用戶20%以上的響應時間。使用CDN是一(yī)個隻需要相對簡單地修改代碼實現顯著改善網站訪問速度的方法。
12、爲文件頭指定Expires或Cache-Control
這條守則包括兩方面的内容：
對于靜态内容：設置文件頭過期時間Expires的值爲“Never expire”（永不過期）
對于動态内容：使用恰當的Cache-Control文件頭來幫助浏覽器進行有條件的請求
網頁内容設計現在越來越豐富，這就意味着頁面中(zhōng)要包含更多的腳本、樣式表、圖片和Flash。第一(yī)次訪問你頁面的用戶就意味着進行多次的HTTP請求，但 是通過使用Expires文件頭就可以使這樣内容具有緩存性。它避免了接下(xià)來的頁面訪問中(zhōng)不必要的HTTP請求。Expires文件頭經常用于圖像文件， 但是應該在所有的内容都使用他，包括腳本、樣式表和Flash等。
浏覽器（和代理）使用緩存來減少HTTP請求的大(dà)小(xiǎo)和次數以加快頁面訪問速度。Web服務器在HTTP響應中(zhōng)使用Expires文件頭來告訴客戶端内容需 要緩存多長時間。下(xià)面這個例子是一(yī)個較長時間的Expires文件頭，它告訴浏覽器這個響應直到2010年4月15日才過期。
Expires: Thu, 15 Apr 2010 20:00:00 GMT
如果你使用的是Apache服務器，可以使用ExpiresDefault來設定相對當前日期的過期時間。下(xià)面這個例子是使用ExpiresDefault來設定請求時間後10年過期的文件頭：
ExpiresDefault "access plus 10 years"
要切記，如果使用了Expires文件頭，當頁面内容改變時就必須改變内容的文件名。依Yahoo!來說我(wǒ)(wǒ)們經常使用這樣的步驟：在内容的文件名中(zhōng)加上版 本号，如yahoo_2.0.6.js。
使用Expires文件頭隻有會在用戶已經訪問過你的網站後才會起作用。當用戶首次訪問你的網站時這對減少HTTP請求次數來說是無效的，因爲浏覽器的緩 存是空的。因此這種方法對于你網站性能的改進情況要依據他們“預緩存”存在時對你頁面的點擊頻(pín)率（“預緩存”中(zhōng)已經包含了頁面中(zhōng)的所有内容）。 Yahoo!建立了一(yī)套測量方法，我(wǒ)(wǒ)們發現所有的頁面浏覽量中(zhōng)有75~85%都有“預緩存”。通過使用Expires文件頭，增加了緩存在浏覽器中(zhōng)内容的 數量，并且可以在用戶接下(xià)來的請求中(zhōng)再次使用這些内容，這甚至都不需要通過用戶發送一(yī)個字節的請求。