網頁性能優化

BLOG

網頁性能優化是一個工程學問題，理論上正確到實踐中未必合適。網頁性能優化要根據項目實際狀況來應變，沒有銀彈。

HTTP、網絡層面優化

上邊 4 圖分別是請求 www.zhihu.com 80 端口和 443 端口的 Timing 圖狀況，能夠看出從鍵入網址到頁面加載完成，主要通過如下幾個階段：

1. 查詢 DNS（DNS lookup）
2. 初始化 TCP 連接（Initial connection）、https 還包括 SSL
3. 發送 http 請求（Request sent）
4. 等待服務器響應（Waiting）
5. 響應內容下載（Content Downloaded）

因此優化網頁性能也應該從減小以上幾個階段的時間入手，下邊主要討論前端所能涉及到的，非前端所能改變的不會有太多說起。

首先是最直接減小以上 5 個階段時間的方案（方案 A）：

1. 減小 DNS 查詢時間：同一網頁中不要使用過多域名下的資源
2. 減小 初始化 TCP 連接的時間，減小頁面中資源的數量，好比合並 CSS、js，使用雪碧圖等等
3. 減小發送 http 請求所需時間，這一方面主要是從減小請求內容入手，好比不濫用 cookies，該使用 localstorage 的時候就是用 localstorage
4. 減小等待服務器響應時間，這一方面主要是服務器響應速度問題，主要從服務器端來解決，服務器性能、服務器端代碼性能、服務器網絡等等，使用 CDN 是減小這一階段時間的有效手段，通常來講北京用戶訪問北京的服務器總比訪問美國的服務器要快得多。
5. 減小響應內容下載的時間，開啓 gzip 壓縮是一個有效的手段，4 中提到的 CDN 也是如此。

在上邊的方案中我沒有考慮瀏覽器的並行下載能力，實際上瀏覽器是能夠同時並行下載多個資源的，可是通常瀏覽器都會對同一個域名下並行下載的資源數量做出限制，通常每一個域名容許並行下載的數量是 4-10 個（取決於瀏覽器）。那麼考慮到利用瀏覽器的並行能力，還有如下幾個點（方案 B）：

1. 拆分大的 CSS、js 等文件，這一點和上邊的 2 中提到的方案是矛盾的，在一開始我就提到，網頁性能優化是工程學問題，兩權相害取其輕。
2. 爲了解決瀏覽器對並行下載數量的限制，咱們會在同一個頁面中使用多個域名下的資源，這一點又和上邊 1 中的方案是矛盾的。實際中每每是將圖片、js、css 等靜態內容放到單獨的 CDN，這樣靜態文件 CDN 尚未 cookies，可以減小發送 http 請求的時間，也能優雅的在不一樣項目中實現資源複用，用戶在打開你的其餘網站時也不須要再次加載。

還有一點是沒有提到的，那就是緩存，直接從本地加載纔是最快的。實際中每每會對 CSS、js、圖片等內容設置很長的緩存時間，當文件內容變動時直接修改文件名，前端的工程化使得 xx-hash.js 這種方式變得很簡單。對於一些公共的庫（好比 jQuery）使用公共的 CDN （如 bootcdn）也是不錯的方案，這樣會使得即便用戶是第一次打開你的網站也有極可能不須要再次請求。

寫到這裏看起來有些亂，有些地方有矛盾，我也沒有總結相似於雅虎軍規相似的東西，仍是那一句話，沒有銀彈。把握住根源，從網絡層面的各個階段來着手，根據項目具體狀況具體分析，性能優化是須要實測的，看起來很合理的方案，實際中反而可能出現負面效果。充分利用開發者工具，如 Audits面板、Network 面板下的 Timing，他們做爲參考讓你可以容易發現拖後腿的環節，而後能夠採起針對性的方案。

同時，技術是一直在進步的，優化方案也不會一成不變，之前感受不錯的方案，未來可能會變得無效；有反作用的方案，未來可能會變成最優解。好比 HTTP/2.0 的多路複用，多路複用容許同時經過單一的 HTTP/2 鏈接發起多重的請求-響應消息，那麼方案 A 中的 2，合併文件來減小連接從而減小創建 TCP 鏈接的時間效果就再也不明顯，同時使用多個域名的 CDN 來破解瀏覽器並行數量的限制也就並不是必要了。這也提醒咱們，技術的進步可能比咱們費心的優化有效百倍。

代碼層面

代碼層面的優化方案主要有懶加載、動態加載、預加載等方案。

• 懶加載是指在須要資源的時候才進行加載，觸發某些條件纔開始異步加載，常見的是圖片懶加載，通常是圖片進入或者快進入視區的時候纔開始加載圖片。懶加載可以減小請求數或延遲請求數，有效的減小服務器壓力，同時也提高了用戶的首屏加載速度。
• 動態加載相似於懶加載，和懶加載的不一樣之處在於加載完首屏資源後就會自動加載其餘資源，而不等待觸發某些條件。看起來和懶加載極其類似，甚至也能夠歸類於觸發條件爲首屏資源加載完畢的懶加載。
• 預加載和懶加載相反，會提早下載好資源，等須要的時候直接從緩存讀取內容。好比須要翻頁的內容，提早讀取下一頁甚至下 2 頁的內容。預加載有時會增大服務器壓力，換取更好的用戶體驗，可使用戶的操做獲得最快的響應。