摘要：簡要說明在上一篇文章前端性能分析一中，我們對前端性能相關的知識進行了學習和探討，并且做了一個試驗性質的項目用來實踐和驗證，本文附上主要功能模塊的源碼，作為對前端性能分析的學習記錄。能夠實現對網頁性能的監控，主要是依靠。

在上一篇文章《Web 前端性能分析（一）》中，我們對前端性能相關的知識進行了學習和探討，并且做了一個試驗性質的項目用來實踐和驗證，本文附上主要功能模塊 - web-performance.js 的源碼，作為對web前端性能分析的學習記錄。

能夠實現對網頁性能的監控，主要是依靠 Performance API。

《JavaScript 標準參考教程（alpha）》

MDN文檔

/**
 * ------------------------------------------------------------------
 * 網頁性能監控
 * ------------------------------------------------------------------
 */
(function (win) {

  // 兼容的數組判斷方法
  if (!Array.isArray) {
    Array.isArray = function (arg) {
      return Object.prototype.toString.call(arg) === "[object Array]";
    };
  }

  // 模塊定義
  function factory() {
    var performance = win.performance;

    if (!performance) {
      // 當前瀏覽器不支持
      console.log("Browser does not support Web Performance");
      return;
    }

    var wp = {};
    wp.pagePerformanceInfo = null; // 記錄頁面初始化性能信息
    wp.xhrInfoArr = []; // 記錄頁面初始化完成前的 ajax 信息


    /**
     * performance 基本方法 & 定義主要信息字段
     * ------------------------------------------------------------------
     */

    // 計算首頁加載相關時間
    wp.getPerformanceTiming = function () {
      var t = performance.timing;
      var times = {};

      //【重要】頁面加載完成的時間, 這幾乎代表了用戶等待頁面可用的時間
      times.pageLoad = t.loadEventEnd - t.navigationStart;
      //【重要】DNS 查詢時間
      // times.dns = t.domainLookupEnd - t.domainLookupStart;
      //【重要】讀取頁面第一個字節的時間(白屏時間), 這可以理解為用戶拿到你的資源占用的時間
      // TTFB 即 Time To First Byte 的意思
      times.ttfb = t.responseStart - t.navigationStart;
      //【重要】request請求耗時, 即內容加載完成的時間
      // times.request = t.responseEnd - t.requestStart;
      //【重要】解析 DOM 樹結構的時間
      // times.domParse = t.domComplete - t.responseEnd;
      //【重要】用戶可操作時間
      times.domReady = t.domContentLoadedEventEnd - t.navigationStart;
      //【重要】執行 onload 回調函數的時間
      times.onload = t.loadEventEnd - t.loadEventStart;
      // 卸載頁面的時間
      // times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;
      // TCP 建立連接完成握手的時間
      times.tcpConnect = t.connectEnd - t.connectStart;

      // 開始時間
      times.startTime = t.navigationStart;

      return times;
    };

    // 計算單個資源加載時間
    wp.getEntryTiming = function (entry) {

      // entry 的時間點都是相對于 navigationStart 的相對時間

      var t = entry;
      var times = {};

      // 重定向的時間
      // times.redirect = t.redirectEnd - t.redirectStart;
      // DNS 查詢時間
      // times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
      // TCP 建立連接完成握手的時間
      // times.connect = t.connectEnd - t.connectStart;

      // 用戶下載時間
      times.contentDownload = t.responseEnd - t.responseStart;
      // ttfb 讀取首字節的時間 等待服務器處理
      times.ttfb = t.responseStart - t.requestStart;

      // 掛載 entry 返回
      times.resourceName = entry.name; // 資源名稱, 也是資源的絕對路徑
      times.entryType = entry.entryType; // 資源類型
      times.initiatorType = entry.initiatorType; // link  | script