摘要：簡(jiǎn)要說(shuō)明在上一篇文章前端性能分析一中，我們對(duì)前端性能相關(guān)的知識(shí)進(jìn)行了學(xué)習(xí)和探討，并且做了一個(gè)試驗(yàn)性質(zhì)的項(xiàng)目用來(lái)實(shí)踐和驗(yàn)證，本文附上主要功能模塊的源碼，作為對(duì)前端性能分析的學(xué)習(xí)記錄。能夠?qū)崿F(xiàn)對(duì)網(wǎng)頁(yè)性能的監(jiān)控，主要是依靠。

在上一篇文章《Web 前端性能分析（一）》中，我們對(duì)前端性能相關(guān)的知識(shí)進(jìn)行了學(xué)習(xí)和探討，并且做了一個(gè)試驗(yàn)性質(zhì)的項(xiàng)目用來(lái)實(shí)踐和驗(yàn)證，本文附上主要功能模塊 - web-performance.js 的源碼，作為對(duì)web前端性能分析的學(xué)習(xí)記錄。

能夠?qū)崿F(xiàn)對(duì)網(wǎng)頁(yè)性能的監(jiān)控，主要是依靠 Performance API。

《JavaScript 標(biāo)準(zhǔn)參考教程（alpha）》

MDN文檔

/**
 * ------------------------------------------------------------------
 * 網(wǎng)頁(yè)性能監(jiān)控
 * ------------------------------------------------------------------
 */
(function (win) {

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

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

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

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


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

    // 計(jì)算首頁(yè)加載相關(guān)時(shí)間
    wp.getPerformanceTiming = function () {
      var t = performance.timing;
      var times = {};

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

      // 開始時(shí)間
      times.startTime = t.navigationStart;

      return times;
    };

    // 計(jì)算單個(gè)資源加載時(shí)間
    wp.getEntryTiming = function (entry) {

      // entry 的時(shí)間點(diǎn)都是相對(duì)于 navigationStart 的相對(duì)時(shí)間

      var t = entry;
      var times = {};

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

      // 用戶下載時(shí)間
      times.contentDownload = t.responseEnd - t.responseStart;
      // ttfb 讀取首字節(jié)的時(shí)間 等待服務(wù)器處理
      times.ttfb = t.responseStart - t.requestStart;

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