關於網站效能優化準則

　　這幾日拜讀了Steve Souders的《高效能網站建設指南這本書》，雖然這本書可能已經有些老了，但薄薄的一個小冊子裡提出的網站效能優化的準則還是非常有價值的。這些規則都有個共同點，就是用很小的工作就能獲得很明顯的效能提升，價效比極高。廢話不多說了，總結一下書裡的幾點效能優化規則。

　　首先有一點需要說明的是書中所寫的效能黃金法則：只有10%~20%的響應時間花在了下載HTML文件上，其餘的80%~90%時間花在了下載頁面的所有元件上。
這也是後面這些效能規則由來的核心。

　　規則一：減少HTTP請求。這本書的規則順序是按照其重要性來排名的，減少HTTP請求作為第一個規則，足見其重要性。根據黃金法則，減少元件數量從而減少HTTP請求是最有效的效能優化方式，其中有幾項技術值得提一下：

1. CSS Sprites。應該前端人都比較熟悉了，把圖片整合到一個大圖裡，利用background-position來定位。

2. data:URL。值得一說把圖片變為內聯的，減少了圖片請求，webpack裡圖片小於8kb就會轉為base64的data:URL。

3. 合併指令碼和CSS。

　　規則二：使用CDN。這個規則不用多說，分發內容使之更靠近終端使用者，減少了請求時間。

　　規則三：新增Expires頭。善用快取，給長久不變的內容元件設定有效期較久的Expires頭。

　　規則四：壓縮元件。利用gzip等內容編碼對文件或元件進行壓縮，通常能將相應資料量減少70%左右。

　　規則五：將樣式表放在頂部。頁面在開啟工程中逐步呈現，使用者會覺得頁面快一些，也讓使用者在等待過程中有一個良好的反饋。把CSS放在底部的話有可能出現白屏現象。

　　規則六：將指令碼放在底部。頁面下載指令碼時會阻止其他內容下載與呈現，以防止瀏覽器的重繪重排。所以把指令碼放在頁面的底部不會阻止頁面內容的呈現，而且頁面一些視覺化元件可以儘早下載而不被阻塞。

　　規則七：避免使用CSS表示式。CSS表示式會進行頻繁的求值，導致了效能低下。

　　規則八：使用外部JavaScript和CSS。純粹而言，內聯更快一些，因為滿足了規則一的減少HTTP請求，但是這個問題上，一定要考慮快取帶來的效能優化，外部檔案很有可能被快取下來，從而提升了效能。

　　規則九：減少DNS查詢。善用DNS快取，比如持久連線。

　　規則十：精簡JavaScript。移除不必要的字元空格，我們常見的.min.js就是如此。

　　規則十一：避免重定向。3xx的響應狀態碼代表著一股重定向的響應。其中URL結尾缺少斜線造成的重定向需要特別注意，不要因為這一點失誤損傷效能。

　　規則十二：刪除重複指令碼。

　　規則十三：配置ETag。說起這個不得不說條件請求If-Modified-Since和If-None-Match，都是用來進行快取再驗證。ETag的問題是伺服器構造ETag時，儘管兩個檔案完全一樣，但如果處於不同的伺服器的話還是會有不同的ETag，增加了HTTP進行請求下載的次數，這對於後臺是伺服器叢集的網站效能損傷很大。

　　規則十四：使Ajax可快取。雖然Ajax是非同步的，但也不能讓等待響應的時間過長。優化準則的話參見上面的效能準則，其中善用快取依然是我們重點關注的。

　　書最後用這些準則分析了美國十大網站，發現有效利用這些規則效能有很大的提升空間，我也看了一下自己實習時候專案，發現可優化的地方非常多。以後的開發過程中要謹記這些準則，讓自己產品的使用者獲得更好的體驗。