讀高性能網站建設指南

性能黃金法則：隻有10%~20%的最終使用者響應時間花在了下載下傳HTML文檔上。其餘的80%~90%時間花在了下載下傳頁面中所有元件上

規則1：減少HTTP請求

圖檔地圖（Map）

CSS Sprites(css精靈)

内聯圖檔（<a><img src = "" ></a>）

合并腳本和合并樣式表

圖檔地圖魚css sprites響應時間幾乎一樣，比原來為每個圖檔使用連結快50%以上，将内聯圖檔放置在外部樣式表中增加了一個額外的http請求，但被緩存後可以獲得額外的收獲

規則2：使用内容釋出網絡（CDN）

将所有靜态元件轉移到CDN上

規則3：添加Expries頭

長久的Expires頭應該用在所有元件上，包括腳本、樣式表、和Flash

HTTP1.1引入Cache-Control頭來克服expries頭的限制，因為expries頭使用一個特定的時間，他要求伺服器魚用戶端時鐘嚴格同步。

Cache-Control頭使用max-age指定元件被緩存多久，他以秒為機關（不支援HTTP1.1的浏覽器使用無效）

HTML文檔不應該使用長久的Expires頭，因為他包含動态内容

規則4：壓縮元件

使用gzip編碼來壓縮HTTP響應包

web用戶端通過HTTP請求中的Accept-Encoding頭來辨別對壓縮的支援

Accept-Encoding:gzip,deflate

web伺服器是通過Content-Encoding頭來通知web用戶端

Content-Enconding:gzip(gzip是目前最流行最有效的壓縮方法)

    使用Vary:* 或 Cache-Control:private頭來禁用代理緩存，Vary:*頭防止了使用浏覽器使用緩存的元件，推薦使用Cache-Control:private，他是為所有浏覽器禁用代理緩存。因為代理無法緩存你的内容

規則5：将樣式表放在頂部

逐漸呈現（逐漸加載）

将樣式表放在文檔底部會導緻浏覽器中阻止内容逐漸呈現

使用LINK标簽将樣式表放在文檔HEAD中

規則6：将腳本放在底部

将腳本放在頁面越靠下的地方，意味着越多的内容能夠逐漸地呈現

并行下載下傳

最差的情況：将腳本放在頂部，腳本會阻塞對其後面的内容/元件的下載下傳

将腳本移到頁面底部

規則7：避免CSS表達式

CSS表達式是動态設定CSS屬性的一種強大（并且危險）的方式

規則8：使用外部的JavaScript和CSS

加載後下載下傳

規則9：減少DNS查找

DNS緩存和TTL（DDN查找可以被緩存起來以提高性能）

規則10：精簡JavaScript

精簡

從代碼中移除不必要的字元以減少其大小，進而改善加載時間的實踐，在代碼被精簡後，所有的注釋以及不必要的空白字元（空格、制表符、換行）都将被移除

混淆

和精簡一樣，也會移除注釋與空白，同時它會改寫代碼。作為改寫的一部分，函數和變量名将被轉換為更短的字元串，這時代碼更精煉，也變得更難以閱讀

三個主要缺點

缺陷：混淆過程本身很有可能引入錯誤

維護：由于混淆會改變JavaScript字元，是以需要對任何不能改變的符号進行标記，防止混淆器修改它們

調試：混淆的代碼很難閱讀，造成産品在調式問題更加困難

節省

精簡JavaScript腳本最流行的工具jsMin

結合使用gzip壓縮之後，精簡和混淆之間的差距會減少，精簡腳本可以降低響應時間，但不會帶來混淆的風險

規則11：避免重定向

重定向會使你的頁面變慢

使用重定向會延遲整個HTML文檔的傳輸。在HTML文檔到達之前，頁面中不會呈現出任何東西，也沒有任何元件會被下載下傳

使用Alias/mod_rewrite/DirectorySlash和直接連接配接代碼來避免重定向

規則12：移除重複腳本

重複腳本損傷性能——不必要HTTP請求和執行JavaScript所浪費的時間

在頁面中包含相同的腳本會使頁面變慢

在IE中，如果腳本沒有被緩存，或在重新加載頁面時，會産生額外的HTTP請求

在Firefox和IE中，腳本會被多次求值

避免重複腳本

在模闆系統中實作一個腳本管理子產品

規則13：配置ETag

ETag：實體标簽（Entity Tag，ETag）是web伺服器和浏覽器用于确認緩存元件的有效性的一種機制

伺服器在檢測緩存的元件是否和原始伺服器上的元件比對時有兩種方式

比較最新日期

比較實體标簽

ETag是唯一辨別了一個元件的一個特定版本的字元串。唯一的格式限制是該字元串必須用引号引起來

ETag還降低了代理緩存的效率

規則14：使用Ajax緩存

DHTML：動态HTML允許在頁面加載完成後，HTML頁面的表現能夠變化。這是JavaScript和css與浏覽器的文檔對象模型進行互動來實作

Ajax：異步的JavaScript與XML。它将Web體驗從“浏覽頁面”轉變為“與應用程式進行互動

Ajax的請求：

被動請求：是為了将來使用而預先發起的

主動請求：是基于使用者目前的操作而發起的

確定Ajax請求遵守性能指導，尤其應具有長久的Expires頭