關于網站性能優化準則

打算現在開始在博客里寫點東西，也能為自己看過的書學過的知識做一個歸納總結。這幾日拜讀了Steve Souders的《高性能網站建設指南這本書》，雖然這本書可能已經有些老了，但薄薄的一個小冊子里提出的網站性能優化的準則還是非常有價值的。這些規則都有個共同點，就是用很小的工作就能獲得很明顯的性能提升，性價比極高。廢話不多說了，總結一下書里的幾點性能優化規則。

規則一：減少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是異步的，但也不能讓等待響應的時間過長。優化準則的話參見上面的性能準則，其中善用緩存依然是我們重點關注的。

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