這幾天拜讀了Steve Souders的《高性能網站建設指南這本書》，雖然這本書可能已經有些老了，但薄薄的一個小冊子裡提出的網站性能優化的準則還是非常有價值的。這些規則都有個共同點，就是用很小的工作就能獲得很明顯的性能提升，性價比極高。廢話不多說了，總結一下書裡的幾點效能最佳化規則。
首先有一點需要說明的是書中所寫的性能黃金法則：只有10%~20%的響應時間花在了下載HTML文檔上，其餘的80%~90%時間花在了下載頁面的所有元件上。
這也是後面這些性能規則由來的核心。
規則一：減少HTTP請求。這本書的規則順序是按照其重要性來排名的，減少HTTP請求作為第一個規則，足見其重要性。根據黃金法則，減少組件數量從而減少HTTP請求是最有效的效能最佳化方式，其中有幾項技術值得提及：
CSS Sprites。應該前端人都比較熟悉了，把圖片整合到一個大圖裡，利用background-position來定位。
data:URL。值得一說把圖片變成內聯的，減少了圖片請求，webpack裡圖片小於8kb就會轉為base64的data:URL。
合併腳本和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是異步的，但也不能讓等待反應的時間過長。最佳化準則的話請參考上面的效能準則，其中善用快取依然是我們重點關注的。
書最後用這些準則分析了美國十大網站，發現有效利用這些規則性能有很大的提升空間，我也看了一下自己實習時候項目，發現可優化的地方非常多。在未來的開發過程中要謹記這些準則，讓自己產品的使用者獲得更好的體驗。
