Web 前端性能分析（二）

摘要：简要说明在上一篇文章前端性能分析一中，我们对前端性能相关的知识进行了学习和探讨，并且做了一个试验性质的项目用来实践和验证，本文附上主要功能模块的源码，作为对前端性能分析的学习记录。能够实现对网页性能的监控，主要是依靠。

在上一篇文章《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