Yahoo 14條 雅虎十四條

騰訊前端設計的Leader推薦我背熟的。請大家都能好好學習，不要像我一樣一掃而過，好好的記下來！不僅僅是曉得一些CSS xhtml就好了，深刻認識到很多的東西需要學習的。很早就用Firebug，但是卻沒聽說過Yslow，這叫不喜歡追求。希望大家關注前端設計的，多追求。

有興趣的同學可以裝個 Firebug 下的 Yslow ，測試下自己的網站。

Web 應用性能優化黃金法則：先優化前端程序 (front-end) 的性能，因為 這是 80% 或以上的最終用戶響應時間的花費所在。

法則 1.

減少 HTTP 請求次數 80%的最終用戶響應時間花在前端程序上，而其大部分時間則花在各種頁面元素， 如圖像、 樣式表、 腳本和 Flash 等，的下載上。 減少頁面元素將會減少 HTTP 請求 次數。這是快速顯示頁面的關鍵所在。 一種減少頁面元素個數的方法是簡化頁面設計。 但是否存在其他方式，能做到既 有豐富內容，又能獲得快速響應時間呢？以下是這樣一些技術： Image maps 組合多個圖片到一張圖片中。總文件大小變化不大，但減少了 HTTP 請求次數從而加快了頁面顯示速度。 該方式只適合圖片連續的情況；同時坐標的 定義是煩人又容易出錯的工作。 CSS Sprites 是更好的方法。它可以組合頁面中的圖片到單個文件中，并使用 CSS 的 background-image 和 background-position 屬性來現實所需的部分圖片。 Inline images 使用 data: URL scheme 來在頁面中內嵌圖片。這將增大 HTML 文 件的大小。組合 inline images 到你的（緩存）樣式表是既能較少 HTTP 請求， 又能避免加大 HTML 文件大小的方法。 Combined files 通過組合多個腳本文件到單一文件來減少 HTTP 請求次數。樣式 表也可采用類似方法處理。 這個方法雖然簡單，但沒有得到大規模的使用。 大 10 美國網站每頁平均有 7 個腳本文件和 2 個樣式表。當頁面之間腳本和樣式表變化 很大時，該方式將遇到很大的挑戰，但如果做到的話，將能加快響應時間。 減少 HTTP 請求次數是性能優化的起點。這最提高首次訪問的效率起到很重要的 作用。 Tenni Theurer 的文章 Browser Cache Usage – Exposed!描述，40-60% 據 的日常訪問是首次訪問，因此為首次訪問者加快頁面訪問速度是用戶體驗的關 鍵。

法則 2.

使用 CDN(Content Delivery Network, 內容分發網絡 ) 用戶離 web server 的遠近對響應時間也有很大影響。從用戶角度看，把內容部 署到多個地理位置分散的服務器上將有效提高頁面裝載速度。 但是該從哪里開始 呢？ 作為實現內容地理分布的第一步，不要試圖重構 web 應用以適應分布架構。 改變 架構將導致多個周期性任務，如同步 session 狀態，在多個 server 之間復制數 據庫交易。 這樣縮短用戶與內容距離的嘗試可能被應用架構改版所延遲，或阻止。 我們還記得 80-90%的最終用戶響應時間花在下載頁面中的各種元素上，如圖像 文件、 樣式表、 腳本和 Flash 等。 與其花在重構系統這個困難的任務上，還不如先 分布靜態內容。 這不僅能大大減少響應時間，而且由于 CDN 的存在，分布靜態內 容非常容易實現。 CDN 是地理上分布的 web server 的集合，用于更高效地發布內容。 通常基于網絡 遠近來選擇給具體用戶服務的 web server。 一些大型網站擁有自己的 CDN，但是使用如 Akamai Technologies, Mirror Image Internet, 或 Limelight Networks 等 CDN 服務提供商的服務將是劃算的。 在 Yahoo!把靜態內容分布到 CDN 減少了用戶影響時間 20%或更多。切換到 CDN 的 代碼修改工作是很容易的，但能達到提高網站的速度。

法則 3.

增加 Expires Header 網頁內容正變得越來越豐富，這意味著更多的腳本文件、樣式表、圖像文件和 Flash。 首次訪問者將不得不面臨多次 HTTP 請求，但通過使用 Expires header， 您可以在客戶端緩存這些元素。這在后續訪問中避免了不必要的 HTTP 請求。 Expires header 最常用于圖像文件，但是它也應該用于腳本文件、樣式表和 Flash。 瀏覽器（和代理）使用緩存來減少 HTTP 請求的次數和大小，使得網頁加速裝載。 Web server 通過 Expires header 告訴客戶端一個元素可以緩存的時間長度。 如果服務器是 Apache 的話，您可以使用 ExpiresDefault 基于當期日期來設置 過期日期，如： ExpiresDefault “access plus 10 years” 設置過期時間為從請求時間開始 計算的 10 年。 請記住，如果使用超長的過期時間，則當內容改變時，您必須修改文件名稱。 在 Yahoo!我們經常把改名作為 release 的一個步驟：版本號內嵌在文件名中，如 yahoo_2.0.6.js。

法則 4.

壓縮頁面元素 通過壓縮 HTTP 響應內容可減少頁面響應時間。從 HTTP/1.1 開始，web 客戶端在 HTTP 請求中通過 Accept-Encoding 頭來表明支持的壓縮類型，如： Accept-Encoding: gzip, deflate. 如果 Web server 檢查到 Accept-Encoding 頭，它會使用客戶端支持的方法來壓 縮 HTTP 響應，會設置 Content-Encoding 頭，如：Content-Encoding: gzip。 Gzip 是目前最流行及有效的壓縮方法。 其他的方式如 deflate，但它效果較差， 也不夠流行。通過 Gzip，內容一般可減少 70%。如果是 Apache，在 1.3 版本下需 使用 mod_gzip 模塊，而在 2.x 版本下，則需使用 mod_deflate。 Web server 根據文件類型來決定是否壓縮。 大部分網站對 HTML 文件進行壓縮。 但 對腳本文件和樣式表進行壓縮也是值得的。實際上，對包括 XML 和 JSON 在內的 任務文本信息進行壓縮都是值得的。 圖像文件和 PDF 文件不應該被壓縮，因為它 們本來就是壓縮格式保存的。對它們進行壓縮，不但浪費 CPU，而且還可能增加 文件的大小。 因此，對盡量多的文件類型進行壓縮是一種減少頁面大小和提高用戶體驗的簡 便方法。

法則 5.

把樣式表放在頭上 我們發現把樣式表移到 HEAD 部分可以提高界面加載速度，因此這使得頁面元素 可以順序顯示。 在很多瀏覽器下，如 IE，把樣式表放在 document 的底部的問題在于它禁止了網 頁內容的順序顯示。 瀏覽器阻止顯示以免重畫頁面元素，那用戶只能看到空白頁 了。Firefox 不會阻止顯示，但這意味著當樣式表下載后，有些頁面元素可能需 要重畫，這導致閃爍問題。 HTML 規范明確要求樣式表被定義在 HEAD 中，因此，為避免空白屏幕或閃爍問題， 最好的辦法是遵循 HTML 規范，把樣式表放在 HEAD 中。

法則 6.

把腳本文件放在底部 與樣式文件一樣，我們需要注意腳本文件的位置。 我們需盡量把它們放在頁面的 底部，這樣一方面能順序顯示，另方面可達到最大的并行下載。 瀏覽器會阻塞顯示直到樣式表下載完畢，因此我們需要把樣式表放在 HEAD 部分。 而對于腳本來說，腳本后面內容的順序顯示將被阻塞，因此把腳本盡量放在底 部意味著更多內容能被快速顯示。 腳本引起的第二個問題是它阻塞并行下載數量。HTTP/1.1 規范建議瀏覽器每個 主機的并行下載數不超過 2 個。 因此如果您把圖像文件分布到多臺機器的話，您 可以達到超過 2 個的并行下載。 但是當腳本文件下載時，瀏覽器不會啟動其他的 并行下載，甚至其他主機的下載也不啟動。 在某些情況下，不是很容易就能把腳本移到底部的。如，腳本使用 document.write 方法來插入頁面內容。 同時可能還存在域的問題。 不過在很多情 況下，還是有一些方法的。 一個備選方法是使用延遲腳本（deferred script）。DEFER 屬性表明腳本未包 含 document.write，指示瀏覽器刻繼續顯示。不幸的是，Firefox 不支持 DEFER 屬性。 IE 中，腳本可能被延遲執行，但不一定得到需要的長時間延遲。 在 不過從 另外角度來說，如果腳本能被延遲執行，那它就可以被放在底部了。

法則 7.

避免 CSS 表達式 CSS 表達式是功能強大的(同時也是危險的)用于動態設置 CSS 屬性的方式。IE， 從版本 5 開始支持 CSS 表達式，如 backgourd-color: expression((new Date()).getHours()%2?”#B8D4FF”:”#F08A00”)，即背景色每個小時切換一 次。 CSS 表達式的問題是其執行次數超過大部分人的期望。 不僅頁面顯示和 resize 時 計算表達式，而且當頁面滾屏，甚至當鼠標在頁面上移動時都會重新計算表達 式。 一種減少 CSS 表達式執行次數的方法是一次性表達式，即當第一次執行時就以 明確的數值代替表達式。如果必須動態設置的話，可使用事件處理函數代替。如 果您必須使用 CSS 表達式的話，請記住它們可能被執行上千次，從而影響頁面 性能。

法則 8.

把 JavaScript 和 CSS 放到外部文件中 上述很多性能優化法則都基于外部文件進行優化。 現在，我們必須問一個問題： JavaScript 和 CSS 應該包括在外部文件，還是在頁面文件中？ 在現實世界中，使用外部文件會加快頁面顯示速度，因為外部文件會被瀏覽器 緩存。如果內置 JavaScript 和 CSS 在頁面中雖然會減少 HTTP 請求次數，但增大 了頁面的大小。 另外一方面，使用外部文件，會被瀏覽器緩存，則頁面大小會減 小，同時又不增加 HTTP 請求次數。 因此，一般來說，外部文件是更可行的方式。 唯一的例外是內嵌方式對主頁更有 效，如 Yahoo!和 My Yahoo!都使用內嵌方式。一般來說，在一個 session 中，主 頁訪問此時較少，因此內嵌方式可以取得更快的用戶響應時間。

法則 9.

減少 DNS 查詢次數 DNS 用于映射主機名和 IP 地址，一般一次解析需要 20～120 毫秒。 為達到更高的 性能，DNS 解析通常被多級別地緩存，如由 ISP 或局域網維護的 caching server，本地機器操作系統的緩存（如 windows 上的 DNS Client Service）， 瀏覽器。 的缺省 DNS 緩存時間為 30 分鐘，Firefox 的缺省緩沖時間是 1 分鐘。 IE 減少主機名可減少 DNS 查詢的次數，但可能造成并行下載數的減少。避免 DNS 查 詢可減少響應時間，而減少并行下載數可能增加響應時間。 一個可行的折中是把 內容分布到至少 2 個，最多 4 個不同的主機名上。

法則 10.

最小化 JavaScript 代碼 最小化 JavaScript 代碼指在 JS 代碼中刪除不必要的字符，從而降低下載時間。 兩個流行的工具是 JSMin 和 YUI Compressor。 混淆是最小化于源碼的備選方式。 象最小化一樣，它通過刪除注釋和空格來減少 源碼大小，同時它還可以對代碼進行混淆處理。 作為混淆的一部分，函數名和變 量名被替換成短的字符串，這使得代碼更緊湊，同時也更難讀，使得難于被反 向工程。Dojo Compressor (ShrinkSafe)是最常見的混淆工具。 最小化是安全的、直白的過程，而混淆則更復雜，而且容易產生問題。從對美國 10 大網站的調查來看，通過最小化，文件可減少 21%，而混淆則可減少 25%。 除了最小化外部腳本文件外，內嵌的腳本代碼也應該被最小化。 即使腳本根據法 則 4 被壓縮后傳輸，最小化腳本刻減少文件大小 5%或更高。

法則 11.

避免重定向 重定向功能是通過 301 和 302 這兩個 HTTP 狀態碼完成的，如： HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html 瀏覽器自動重定向請求到 Location 指定的 URL 上，重定向的主要問題是降低了 用戶體驗。 一種最耗費資源、經常發生而很容易被忽視的重定向是 URL 的最后缺少/，如訪 問 http://astrology.yahoo.com/astrology 將被重定向到 http://astrology.yahoo.com/astrology/。在 Apache 下，可以通過 Alias，mod_rewrite 或 DirectorySlash 等方式來解決該問題。

法則 12.

刪除重復的腳本文件 在一個頁面中包含重復的 JS 腳本文件會影響性能，即它會建立不必要的 HTTP 請求和額外的 JS 執行。 不必要的 HTTP 請求發生在 IE 下，而 Firefox 不會產生多余的 HTTP 請求。 額外的 JS 執行，不管在 IE 下，還是在 Firefox 下，都會發生。 一個避免重復的腳本文件的方式是使用模板系統來建立腳本管理模塊。 除了防止 重復的腳本文件外，該模塊還可以實現依賴性檢查和增加版本號到腳本文件名 中，從而實現超長的過期時間。

法則 13.

配置 ETags ETags 是用于確定瀏覽器緩存中元素是否與 Web server 中的元素相匹配的機制， 它是比 last-modified date 更靈活的元素驗證機制。ETag 是用于唯一表示元素 版本的字符串，它需被包括在引號中。Web server 首先在 response 中指定 ETag： HTTP/1.1 200 OK < 03:03:59 2006 Dec 12> 10c24bc-4ab-457e1c1f” Content-Length: 12195 后來，如果瀏覽器需要驗證某元素，它使用 If-None-Match 頭回傳 ETag 給 Web server，如果 ETag 匹配，則服務器返回 304 代碼，從而節省了下載時間： GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com < 03:03:59 2006 Dec 12> 10c24bc-4ab-457e1c1f” HTTP/1.1 304 Not Modified ETags 的問題在于它們是基于服務器唯一性的某些屬性構造的，如 Apache1.3 和 2.x，其格式是 inode-size-timestamp，而在 IIS5.0 和 6.0 下，其格式是 Filetimestamp:ChangeNumber。這樣同一個元素在不同的 web server 上，其 ETag 是不一樣的。這樣在多 Web server 的環境下，瀏覽器先從 server1 請求某 元素，后來向 server2 驗證該元素，由于 ETag 不同，所以緩存失效，必須重新 下載。 因此，如果您未用到 ETags 系統提供的靈活的驗證機制，最好刪除 ETag。刪除 ETag 會減少 http response 及后續請求的 HTTP 頭的大小。微軟支持文章描述了 如何刪除 ETags，而在 Apache 下，只要在配置文件中設置 FileETag none 即可。

法則 14.

緩存 Ajax 性能優化法則同樣適用于 web 2.0 應用。提高 Ajax 的性能最重要的方式是使得 其 response 可緩存，就象“法則 3 增加 Expires Header”討論的那樣。以下其 他法則同樣適用于 Ajax，當然法則 3 是最有效的方式:

總結

以上是生活随笔為你收集整理的雅虎Yahoo 前段优化 14条军规的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。