關於網站性能優化準則

打算如今開始在博客裏寫點東西，也能爲本身看過的書學過的知識作一個概括總結。
這幾日拜讀了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是異步的，但也不能讓等待響應的時間過長。優化準則的話參見上面的性能準則，其中善用緩存依然是咱們重點關注的。

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