Navigation Timing API 入門

Performance API

Performance API 是瀏覽器提供給咱們的用於檢測網頁性能的 API，它並非一個孤立的 API，而是一組 API 的組合。主要包括：

• Resource Timing API：與網頁資源（腳本、樣式、圖片等）加載相關的耗時信息，定義了接口 PerformanceResourceTiming。
• Navigation Timing API：從頁面導航開始一直到 load 事件結束，中間經歷過程的耗時信息。定義了接口 PerformanceNavigationTiming，此接口繼承自 PerformanceResourceTiming 接口。
• Paint Timing：與網頁繪製相關的耗時信息。定義了接口 PerformancePaintTiming。

上面三個接口，又都繼承自 Performance Timeline API 中的 PerformanceEntry 接口，因此每一個接口實例叫作 Entry。PerformanceEntry 中定義了四個基本的只讀屬性：name、entryType、startTime 和 duration。

爲了方便理解，如今打開地址：www.w3.org/TR/performa…，調出控制檯，複製下面的代碼（來自 MDN）執行，就能看到網頁從導航到顯示中間的耗時統計信息。

// See: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry#Example
function print_PerformanceEntries() {
  // Use getEntries() to get a list of all performance entries
  var p = performance.getEntries();
  for (var i=0; i < p.length; i++) {
    console.log("PerformanceEntry[" + i + "]");
    print_PerformanceEntry(p[i]);
  }
}
function print_PerformanceEntry(perfEntry) {
  var properties = ["name",
                    "entryType",
                    "startTime",
                    "duration"];

  for (var i=0; i < properties.length; i++) {
    // Check each property
    var supported = properties[i] in perfEntry;
    if (supported) {
      var value = perfEntry[properties[i]];
      console.log("... " + properties[i] + " = " + value);
    } else {
      console.log("... " + properties[i] + " is NOT supported");
    }
  }
}

// 打印網頁
print_PerformanceEntries()
複製代碼

window 對象上暴露了一個 performance 屬性，這個屬性提供了 getEntries 方法，能夠用來獲取整個頁面的性能實體列表（performance entries），這些實體對象中包含了從不一樣角度記錄的耗時信息；接下來再對獲得的結果使用 for 循環遍歷出來。

下面是在我控制檯上的打印結果：

導航階段

本文只介紹導航階段（也都是上面打印的第一條數據）的統計信息。其餘兩個按照下面一樣的思路分析便可。

進入頁面，首先統計的就是頁面從導航一直到 load 事件結束的過程，這些信息都保存在了 PerformanceNavigationTiming 實例中。字段解釋以下：

• name：對應地址欄輸入的導航地址
• entryType 值爲 navigation，表示這是一個 PerformanceNavigationTiming 實例
• startTime：開始時間（單位毫秒，精度到 0.0001 ms）
• duration： 導航過程耗費的時間

更加完整的信息能夠經過使用 performance.getEntries()[0] 得到：

屬性比較多，但它們之間是存在關聯關係的，串在一就組成了整個導航過程。

圖片取自 www.w3.org/TR/navigati…

是否是有種似曾相識的感受呢？最近有面試或者曾經有面試的同窗，確定有被問過「從輸入 URL 到頁面展現，這中間發生了什麼？」的問題，而上面的流程正好對應整個過程。

PerformanceNavigationTiming 實例的屬性解析

如今，咱們就上面的流程，來一個個解析 PerformanceNavigationTiming 實例中所涉及到的各個屬性的含義。

1. startTime: 開始導航的時間。加載新頁面、當前頁面卸載時會觸發 unload 事件。若是當前頁面有未提交的表單數據等狀況，會彈出一個確認關閉框。點擊確認後，導航流程開始。startTime 值幾乎總爲 0。

2. unloaStart、unloadEnd：對應頁面 unload 事件，標記該事件的開始和結束時間。

3. redirectStart、redirectEnd：若是頁面發生了重定向，redirectStart 表示重定向開始時間，redirectEnd 表示重定向結束時間。若是沒有重定向，redirectStart、redirectEnd 值都爲 0。

4. fetchStart：下一步，取瀏覽器本地緩存（強緩存，若是本地緩存過時，還有一個走協商緩存的過程）。fetchStart 表示開始取緩存時間。

5. domainLookupStart、domainLookupEnd：從域名到 IP 地址有一個 DNS 解析過程。domainLookupStart、domainLookupStart 分別標記解析開始和結束時間。

6. connnectStart、connectEnd、secureConnectEnd：獲得 IP 地址，正式開始請求以前，進行 TCP 鏈接。connnectStart 記錄鏈接的開始時間，若是使用的 https 協議，還有一個創建 STL 鏈接，獲得會話密鑰的過程，使用 secureConnectStart 字段記錄。

7. requestStart：接下來發起真正的 HTTP 請求，構建請求頭信息，攜帶 cookie 字段信息等。

8. responseStart、responseEnd：響應開始和結束時間（先接收響應頭，再接收響應體）。

   • 以上對應的是從發出請求到接收響應的整個過程，若是響應頭 Content-Type 字段值爲 text/html，那麼從下一步開始就是頁面渲染階段了。

9. domInteractive、domContentLoadedEventStart、domContentLoadedEventEnd、domComplete：domInteractive、domComplete 能夠對應到 document readystatechange 事件 上的 interactive、complete 值（document.readyState 屬性的兩個可用取值）。domContentLoadedEventStart、domContentLoadedEventEnd 則對應 document DOMContentLoaded  事件，標記事件的開始和結束時間。

10. loadStart、loadEnd：這裏對應的是 load 事件（當頁面資源（腳本、樣式、圖片、音視頻、iframe 等）所有加載完成後），標記事件的開始和結束時間。

至此，梳理完成 PerformanceNavigationTiming 實例全部核心屬性的含義。

實際使用

Cloudflare 公司 在自家的統計系統中，就使用了 PerformanceNavigationTiming 實例信息，對網頁性能作了統計。展現效果以下：

上面展現的指標，是按照下面的方式計算獲得的。

• DNS (domainLookupEnd - domainLookupStart): DNS 查詢話費的時間。若是是重用鏈接或是使用了本地 DNS 數據緩存的話，此值爲 0。
• TCP (connectEnd - connectStart): 創建 TCP 鏈接花費的時間。若是是走 HTTPS 協議，中間還多一步 TLS 協商生成會話密鑰的過程。
• Request (responseStart - requestStart): 從開始發起請求，到接收到第一個字節的響應數據，中間經歷的時間。
• Response (responseEnd - responseStart): 從接受第一個字節的響應數據到接收最後一個字節的響應數據中間經歷的時間，也能夠認爲是資源下載時間。
• Processing (domComplete - domInteractive): 渲染頁面花費的時長。若是數值很大，那麼你可能就要考慮去優化文檔結構或是資源大小了。
• Load Event (loadEventEnd - loadEventStart): 當瀏覽器完成頁面中全部的資源加載的時候，會觸發一個 load 事件. 在這個階段，你能夠在事件處理函數中，添加額外的處理邏輯。
• Total Time: 上圖中各項指標的花費時間總和。

參考連接

• A Primer for Web Performance Timing APIs，W3C
• Inside the Web Browser’s Performance API，Cloudflare

（完）