摘要：前言通過相關的，我們可以對頁面進行性能分析。下面會就幾個比較重要的過程進行分析，給出耗時計算方法，并針對性的給出一些優(yōu)化建議。下文中的均表示解析域名系統(tǒng)英文，縮寫是互聯(lián)網(wǎng)的一項服務。

通過HTML5 Performanc相關的API，我們可以對頁面進行性能分析。

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

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

域名系統(tǒng)（英文：Domain Name System，縮寫：DNS）是互聯(lián)網(wǎng)的一項服務。它作為將域名和IP地址相互映射的一個分布式數(shù)據(jù)庫，能夠使人更方便地訪問互聯(lián)網(wǎng)。

簡單來說就是將一個域名映射到其對應的服務器IP地址，后續(xù)的請求均發(fā)送到該服務器。

DNS查詢的基本過程如下：

查找瀏覽器緩存
瀏覽器會緩存DNS查詢結果，不同的瀏覽器緩存時間會有所不同。如果瀏覽器存在緩存，那么DNS查詢就到此為止。

查找系統(tǒng)緩存
瀏覽器緩存中沒有需要的數(shù)據(jù)時，就會往上找到操作系統(tǒng)緩存。我們也可以手動配置host文件，這樣瀏覽器會優(yōu)先使用我們的配置。

查找路由器緩存
系統(tǒng)緩存中也沒有需要的數(shù)據(jù)時，就會找到路由器。

查找運營商DNS緩存
之后會向運營的服務器（網(wǎng)絡配置中的DNS服務器地址）請求DNS數(shù)據(jù)。

遞歸搜索
如果運營商服務器內也沒有需要的數(shù)據(jù)時，就會開始消耗最大的遞歸搜索。

舉個栗子m.taobao.com：

首先向根域名服務器請求頂級域com的IP地址；

獲取返回值后，向頂級域com的服務器請求一級域名taobao的IP地址；

獲取返回值后，向一級域名taobao的服務器請求二級域名m的IP地址；

獲取返回值后，完成查找，返回m.taobao.com的IP地址；
根據(jù)網(wǎng)絡的不同，這一塊的耗時可能高達十幾秒。

耗時計算：

let dns = timing.domainLookupEnd - timing.domainLookupStart;

明白工作原理后我們就可以針對域名解析這塊做出一些優(yōu)化，下面是一些優(yōu)化建議：

考慮到域名解析是有時間消耗的，而且有可能消耗還不小，所以我們可以減少頁面中使用到的域名數(shù)量，從而減少解析次數(shù)；

另外一個方法是進行DNS預解析，提前解析好的域名地址會被緩存在瀏覽器中，對其他頁面也能起到加速的作用；

HttpDNS，減少時延的同時還能防劫持；

耗時計算：

let tcp = timing.connectEnd - timing.connectStart;

優(yōu)化點如下：

避免重定向，這個不解釋；

適當?shù)暮喜⒄埱?，同上，減少握手次數(shù)；

長鏈接keep-alive，同上，減少握手次數(shù)；

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

let req = timing.responseStart - timing.requestStart;

優(yōu)化點如下：

避免重定向，還是不解釋；

減少請求數(shù)據(jù)量，檢查是否存在冗余的cookie；

使用CDN，縮短傳輸鏈路；

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

let res = timing.responseEnd - timing.responseStart;

優(yōu)化點如下：

減小html代碼體積，包括去冗余以及代碼壓縮；

傳輸過程開啟Gzip，進一步壓縮傳輸數(shù)據(jù)量；

使用CDN，縮短傳輸鏈路；

耗時計算：

let dom = timing.domInteractive - timing.domLoading;

優(yōu)化點如下：

簡化DOM結構，刪除多余節(jié)點，避免深層嵌套；

同步的js會阻塞解析過程，考慮對js進行分段加載，延遲加載；

下載并執(zhí)行擁有defer屬性的腳本。
耗時計算：

let dom = timing.domInteractive - timing.domLoading;

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

減少需要加載的文件數(shù)，合并代碼；

減小變量調用鏈路，多次訪問到的對象成員保存成局部變量；

緩存函數(shù)運行結果；

算法優(yōu)化，減少迭代次數(shù)，以及迭代的工作量；

縮短函數(shù)調用鏈；

DOM和CSSOM解析完成，并組合成為渲染樹之后開始加載并執(zhí)行defer的腳本。

defer的腳本執(zhí)行完成就觸發(fā)了DOMContentLoad事件，同時進行的還有圖片，css等，這些資源文件加載完成后才是domComplete。

domComplete之后就立刻觸發(fā)load事件。
耗時計算

let domComplete = timing.domComplete - timing.domContentLoadedEventEnd;

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

使用css，iconfont，svg代替圖片

根據(jù)屏幕分辨率進行適配

使用合適的圖片格式，兼容的情況下，webp是個不錯的選擇

小圖片使用data url代替

資源prefetch

lazyload

此外，DOMContentLoaded事件耗時和DOMLoad事件耗時，主要就是執(zhí)行js代碼，優(yōu)化建議參考網(wǎng)頁加載完成。

以上～