《高性能網站建設指南》筆記

　　《高性能網站建設指南》，這是一本值得所有網站前端人員、網站開發人員、網站產品經理一讀的好書。

　　《高》首先分析了網站的用戶響應時間都花在哪里，然后在這個基礎上歸納出提高性能的若干辦法，最后以十大網站為例進行了實例解析。這本書，把我們之前關于網站性能的一些散碎知識，體系地串了起來，清楚地闡述了“其所以然”。篇幅不長，認真讀的話，兩三天也就能讀完了。

　　前端優化的重要性：

　　前端優化通常只要較少的時間和資源，例如修改Web服務器配置文件、將腳本和樣式表放在特定位置、合并圖片、合并腳本等，這些修改只需要幾個小時或幾天;而后端優化通常很麻煩，例如重新設計應用程序架構和代碼、查找和優化臨界代碼路徑、添加或改動硬件、對數據庫進行分布化等，這些需要花費數周或數月。

　　只有10%～20%的最終用戶響應時間花在了從服務器端獲取HTML文檔上(后端優化有助于縮短這部分的時間)，其余的80%～90%時間花在了下載頁面中的所有組件上(前端優化有助于縮短這部分的時間)，根據二八原則，我們應該更關注前端優化。[鄧熔注：這數據不是猜測的，著者列舉了十大網站的具體數據。]

　　前端優化的舉措：

　　著者列舉了14個舉措(就是業界著名的網站性能14條)，歸納方式有點散亂。我按我認為容易理解的方式，重新歸納如下：

　　減少http請求次數(http請求次數對性能的影響很大)：

　　在圖片方面，有三個具體方案：圖片地圖、CSS Sprites、內聯圖片三種，最值得關注的是CSS Sprites。

　　腳本和樣式表也要合并，雖然合并有悖于模塊化開發的原則，但非常有利于性能。

　　緩存可以使一些http請求轉為調用客戶端的已有資源。所以，必須關注Expires頭的設置。另外，HTTP1.1引入了“Cache-Control”頭，可以用“max-age”來設置緩存的時間長度。

　　移除ETag或者對ETag進行專門配置，以免影響緩存調取。因為默認配置的ETag，和原始服務器的屬性相關，當多臺服務器時，會導致緩存調取失敗。(N臺服務器，緩存調取成功的概率是1/N)

　　對于用戶的著陸頁(Landing Page)，腳本和樣式表究竟應該內聯(寫到html里)還是應該外置?內聯有利于減少http請求數，外置有利于緩存。對這個問題的探討，產生了所謂“加載后下載(Post-Onload Download)”的方案：內聯，但在頁面加載完成后通過onload事件，動態下載外部腳本和樣式表。[鄧熔注：除“加載后下載”之外，還有一個“動態內聯”的方案，但涉及到Cookie，把問題弄復雜了。“加載后下載”也可用于預先下載用戶下一頁需要的元素。]

　　充分利用并行下載：

　　使用兩個主機名。HTTP1.1建議瀏覽器從每個主機名并行下載兩個元素，使用多個主機名能進行更多的并行下載，但由于帶寬和CPU速度，過多的并行下載也會降低性能。Yahoo!的研究表明，使用兩個主機名性能最優。

　　將腳本放在底部，以避免對并行下載的影響。因為下載腳本時，并行下載是禁止的。

　　減小元素的大?。?/p>

　　精簡腳本。用JSMin精簡外置腳本，這能移除所有的注釋以及不必要的空白字符，使腳本減小20%。(內聯的腳本也應該盡量精簡)

　　優化CSS。CSS中的注釋和空白字符比較少，優化空間在于合并相同的類、移除不使用的類。同時，應避免使用CSS表達式，改用一次性表達式和使用事件處理器。因為CSS表達式會頻繁求值，當頁面滾動、甚至用戶鼠標移動時都會求值。

　　務必使用Gzip對腳本、樣式表、html文檔進行壓縮，這通常能減小60%的數據量。刪除注釋、縮短URL等雖然也有用，但費事得多且效果微弱。

　　其他：

　　避免沒必要的重定向(例如在URL的結尾必須出現“/”但沒有出現時)，因為在重定向完畢并且html文檔下載完畢之前，沒有任何東西展示給用戶;對于為了跟蹤流量而使用的重定向，建議改用“referer”或“beacon + XMLHttpRequest”;對于為了轉換新舊網站而進行的重定向，著者在P81上提供了解決方案。[鄧熔注：關于流量監控方面，是否改用其他方案，還需要綜合評估方案相應的數據統計易用性;關于P81上的解決方案，我不知道是否對SEO會有影響，改善性能的時候，也需要綜合平衡SEO。]

　　使用CDN(Content Delivery Network)，縮小內容和用戶的距離。

　　將樣式表放在頂部，這樣能使內容在瀏覽器中逐步呈現。盡管整個頁面的加載總耗時可能并無變化，但逐步呈現內容，能使用戶感覺更快。[鄧熔注：這也是滾動條的作用，有心理學依據。]

　　適當減少主機名，以減少DNS查找。[鄧熔注：這一點在實際操作中，需要綜合平衡SEO策略、運維策略等。]

　　P96-102頁探討了Ajax下的優化問題。

原文轉自：http://blogread.cn/it/article/1050?f=wb