頁面加載過程詳解和優化策略

前言

經過HTML5 Performanc相關的API，咱們能夠對頁面進行性能分析。

下面會就幾個比較重要的過程進行分析，給出耗時計算方法，並針對性的給出一些優化建議。

// 下文中的timing均表示performance.timing
let timing = window.performance.timing;

DNS解析

域名系統（英文：Domain Name System，縮寫：DNS）是互聯網的一項服務。它做爲將域名和IP地址相互映射的一個分佈式數據庫，可以令人更方便地訪問互聯網。

簡單來講就是將一個域名映射到其對應的服務器IP地址，後續的請求均發送到該服務器。

DNS查詢的基本過程以下：

1. 查找瀏覽器緩存
   瀏覽器會緩存DNS查詢結果，不一樣的瀏覽器緩存時間會有所不一樣。若是瀏覽器存在緩存，那麼DNS查詢就到此爲止。
2. 查找系統緩存
   瀏覽器緩存中沒有須要的數據時，就會往上找到操做系統緩存。咱們也能夠手動配置host文件，這樣瀏覽器會優先使用咱們的配置。
3. 查找路由器緩存
   系統緩存中也沒有須要的數據時，就會找到路由器。
4. 查找運營商DNS緩存
   以後會向運營的服務器（網絡配置中的DNS服務器地址）請求DNS數據。
5. 遞歸搜索
   若是運營商服務器內也沒有須要的數據時，就會開始消耗最大的遞歸搜索。

舉個栗子m.taobao.com：

1. 首先向根域名服務器請求頂級域com的IP地址；
2. 獲取返回值後，向頂級域com的服務器請求一級域名taobao的IP地址；
3. 獲取返回值後，向一級域名taobao的服務器請求二級域名m的IP地址；
4. 獲取返回值後，完成查找，返回m.taobao.com的IP地址；
   根據網絡的不一樣，這一塊的耗時可能高達十幾秒。

耗時計算：

let dns = timing.domainLookupEnd - timing.domainLookupStart;

明白工做原理後咱們就能夠針對域名解析這塊作出一些優化，下面是一些優化建議：

1. 考慮到域名解析是有時間消耗的，並且有可能消耗還不小，因此咱們能夠減小頁面中使用到的域名數量，從而減小解析次數；
2. 另一個方法是進行DNS預解析，提早解析好的域名地址會被緩存在瀏覽器中，對其餘頁面也能起到加速的做用；
3. HttpDNS，減小時延的同時還能防劫持；

創建鏈接

耗時計算：

let tcp = timing.connectEnd - timing.connectStart;

優化點以下：

1. 避免重定向，這個不解釋；
2. 適當的合併請求，同上，減小握手次數；
3. 長連接keep-alive，同上，減小握手次數；

發送請求

從發送請求到開始響應的過程。
耗時計算：

let req = timing.responseStart - timing.requestStart;

優化點以下：

1. 避免重定向，仍是不解釋；
2. 減小請求數據量，檢查是否存在冗餘的cookie；
3. 使用CDN，縮短傳輸鏈路；

接收數據

從響應開始到數據傳輸完成的過程。
耗時計算：

let res = timing.responseEnd - timing.responseStart;

優化點以下：

1. 減少html代碼體積，包括去冗餘以及代碼壓縮；
2. 傳輸過程開啓Gzip，進一步壓縮傳輸數據量；
3. 使用CDN，縮短傳輸鏈路；

解析DOM樹

耗時計算：

let dom = timing.domInteractive - timing.domLoading;

優化點以下：

1. 簡化DOM結構，刪除多餘節點，避免深層嵌套；
2. 同步的js會阻塞解析過程，考慮對js進行分段加載，延遲加載；

網頁加載完成

下載並執行擁有defer屬性的腳本。
耗時計算：

let dom = timing.domInteractive - timing.domLoading;

這一塊的優化點主要集中在js代碼層次的優化。然鵝，js的優化值得寫本書來好好唸叨唸叨，so，這裏就不展開了，主要給幾個點吧：

1. 減小須要加載的文件數，合併代碼；
2. 減少變量調用鏈路，屢次訪問到的對象成員保存成局部變量；
3. 緩存函數運行結果；
4. 算法優化，減小迭代次數，以及迭代的工做量；
5. 縮短函數調用鏈；

DOM加載完成

DOM和CSSOM解析完成，並組合成爲渲染樹以後開始加載並執行defer的腳本。

defer的腳本執行完成就觸發了DOMContentLoad事件，同時進行的還有圖片，css等，這些資源文件加載完成後纔是domComplete。

domComplete以後就馬上觸發load事件。
耗時計算

let domComplete = timing.domComplete - timing.domContentLoadedEventEnd;

這一塊的優化主要集中在資源層次的優化，這也是一個比較大的項目，同樣，挑幾個點說一下：

1. 使用css，iconfont，svg代替圖片
2. 根據屏幕分辨率進行適配
3. 使用合適的圖片格式，兼容的狀況下，webp是個不錯的選擇
4. 小圖片使用data url代替
5. 資源prefetch
6. lazyload

此外，DOMContentLoaded事件耗時和DOMLoad事件耗時，主要就是執行js代碼，優化建議參考網頁加載完成。

以上～