讀高性能網站建設指南

性能黃金法則：只有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字段聲明瞭一個網頁或URL地址再也不被瀏覽器緩存的時間     
• 長久的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頭