使用navigation timing統計網頁載入速度

前端頁面載入速度的優化是一個系統性的工程，包括常見資源合併壓縮、靜態資源請求多域名化、CDN等。使用者請求顯示一個網頁的詳細過程也是十分複雜，包括DNS解析、建立TCP連線、載入HTML以及靜態資源、渲染頁面dom結構等多個階段，任何一個階段出現瓶頸都會影響使用者體驗，我們如何在真實的使用者環境中準確的統計各個階段的耗時呢？本文給出一個可行的方案。

藉助於W3C的Navigation Timing API(目前大多數瀏覽器都已經支援，包括IE9以上版本)，該API通過window.performance提供頁面載入相關的資訊，我們這裡只需要關注window.performance.timing。開啟chrome開發工具的console標籤，輸入window.performance.timing，典型的輸出如下：

connectEnd: 1450349863256
connectStart: 1450349863216
domComplete: 1450349864919
domContentLoadedEventEnd: 1450349864091
domContentLoadedEventStart: 1450349864066
domInteractive: 1450349864066
domLoading: 1450349863308
domainLookupEnd: 1450349863216
domainLookupStart: 1450349863169
fetchStart: 1450349863167
loadEventEnd: 1450349864920
loadEventStart: 1450349864919
navigationStart: 1450349863167
redirectEnd: 0
redirectStart: 0
requestStart: 1450349863256
responseEnd: 1450349863299
responseStart: 1450349863298
secureConnectionStart: 0
unloadEventEnd: 0
unloadEventStart: 0

其中有各種瀏覽器事件的開始時間和結束時間，具體各個事件的涵義，可以參考W3C標準，這張圖描述的非常清晰。

比如我們要獲取dns的時間：

 domainLookupEnd-domainLookupStart

連線建立耗時：

 connectEnd-connectStart

目前這些資料都可以在瀏覽器中讀到，將他們釋出到服務端機器上，就可以統計分析使用者真實網路環境先的各項指標了。 釋出到服務端機器的一種最簡單的方法就是：將這些資料作為引數請求一個後端檔案，然後我們就可以在access日誌中得到這些資料。一段虛擬碼如下：

if(!window.performace){
    var timing = window.performance.timing.toJSON();
    var params = [];
    for(var ntItem in timing){
        params.push(ntItem+'='+timing[ntItem]);
    }
    var targetUrl = 'www.baidu.com?'+params.join('&');
    ajaxGet(targetUrl);
}

在服務端我們就可以從access日誌中得到Navigation Timing API提供的時間資訊了。 本文參考W3C文件：http://w3c.github.io/navigation-timing/

本文同時發表在我的部落格積木村の研究所 ：http://foio.github.io/navigation-timing/