前端性能监控之performance

var resources = window.performance.getEntriesByType('resource');
console.log(resources);

startTime
在资源提取开始的时间。该值等于fetchStart。

duration
资源完成下载的总时间，它是responseEnd和startTime属性之间的差异。

redirectStart
重定向的开始时间。

redirectEnd
紧接在收到最后一次重定向响应的最后一个字节后。

fetchStart
如果是应用缓存在实现请求，将采集 fetchStart 时间。

domainLookupStart
DNS请求开始时间

domainLookupEnd
DNS请求结束时间

connectStart
开始建立与服务器的连接时间(TCP握手时间)。

connectEnd
在浏览器完成与服务器的连接以检索资源之后(TCP握手结束时间)。

secureConnectionStart
在浏览器启动握手过程之前，以保护当前连接(如果正在使用 TLS 或 SSL 将在握手（确保连接安全）开始时开始)。

requestStart
浏览器开始从服务器请求资源之前(在对某个资源的请求被发送到服务器后立即采集。)。

responseStart
在浏览器收到服务器响应的第一个字节后(服务器初始响应请求的时间)。

responseEnd
在浏览器收到资源的最后一个字节之后或紧接在传输连接关闭之前，以先到者为准(请求结束并且数据完成检索的时间)。

transferSize
表示获取资源的大小（以八位字节为单位）的数字。 包括响应头字段和响应payload body的大小。

encodedBodySize
在删除任何应用的内容编码之前，从payload body的提取（HTTP或高速缓存）接收的大小（以八位字节为单位）的数字。

decodedBodySize
在删除任何应用的内容编码之后，从消息正文( message body )的提取（HTTP或缓存）接收的大小（以八位字节为单位）的数字。

serverTiming
包含服务器时序度量( timing metrics )的PerformanceServerTiming 条目数组。

整个过程时间: responseEnd - startTime 或者 duration
查看DNS查询时间: domainLookupEnd - domainLookupStart
查看TCP三次握手时间(HTTP): connectEnd - connectStart
SSL握手时间(HTTPS协议会有SSL握手)：connectEnd - secureConnectionStart
TTFB(首包时间)：responseStart - startTime
响应时间(剩余包时间): responseEnd - responseStart

function calculate_load_times() {
  // Check performance support
  if (performance === undefined) {
    console.log("= Calculate Load Times: performance NOT supported");
    return;
  }

  // Get a list of "resource" performance entries
  var resources = performance.getEntriesByType("resource");
  if (resources === undefined || resources.length <= 0) {
    console.log("= Calculate Load Times: there are NO `resource` performance records");
    return;
  }

  console.log("= Calculate Load Times");
  for (var i=0; i < resources.length; i++) {
    console.log("== Resource[" + i + "] - " + resources[i].name);
    // Redirect time
    var t = resources[i].redirectEnd - resources[i].redirectStart;
    console.log("... Redirect time = " + t);

    // DNS time
    t = resources[i].domainLookupEnd - resources[i].domainLookupStart;
    console.log("... DNS lookup time = " + t);

    // TCP handshake time
    t = resources[i].connectEnd - resources[i].connectStart;
    console.log("... TCP time = " + t);

    // Secure connection time
    t = (resources[i].secureConnectionStart > 0) ? (resources[i].connectEnd - resources[i].secureConnectionStart) : "0";
    console.log("... Secure connection time = " + t);

    // Response time
    t = resources[i].responseEnd - resources[i].responseStart;
    console.log("... Response time = " + t);

    // Fetch until response end
    t = (resources[i].fetchStart > 0) ? (resources[i].responseEnd - resources[i].fetchStart) : "0";
    console.log("... Fetch until response end time = " + t);

    // Request start until reponse end
    t = (resources[i].requestStart > 0) ? (resources[i].responseEnd - resources[i].requestStart) : "0";
    console.log("... Request start until response end time = " + t);

    // Start until reponse end
    t = (resources[i].startTime > 0) ? (resources[i].responseEnd - resources[i].startTime) : "0";
    console.log("... Start until response end time = " + t);
  }
}

/*
应用程序资源的大小可能会影响应用程序的性能，因此获取有关资源大小的准确数据非常重要（尤其是对于非托管资源）。该PerformanceResourceTiming接口具有三个属性，可用于获取有关资源的大小数据。该transferSize属性返回获取的资源的大小（以八位字节为单位），包括响应头字段和响应有效载荷主体。该encodedBodySize属性返回从有效内容主体的提取（HTTP或缓存）接收的大小（以八位字节为单位），然后再删除任何应用的内容编码。decodedBodySize从抓取（HTTP或高速缓存）的接收到的返回的大小（以字节）消息主体，之后除去任何施加的内容编码。
*/
function display_size_data(){
  // Check for support of the PerformanceResourceTiming.*size properties and print their values
  // if supported.
  if (performance === undefined) {
    console.log("= Display Size Data: performance NOT supported");
    return;
  }

  var list = performance.getEntriesByType("resource");
  if (list === undefined) {
    console.log("= Display Size Data: performance.getEntriesByType() is  NOT supported");
    return;
  }

  // For each "resource", display its *Size property values
  console.log("= Display Size Data");
  for (var i=0; i < list.length; i++) {
    console.log("== Resource[" + i + "] - " + list[i].name);
    if ("decodedBodySize" in list[i])
      console.log("... decodedBodySize[" + i + "] = " + list[i].decodedBodySize);
    else
      console.log("... decodedBodySize[" + i + "] = NOT supported");

    if ("encodedBodySize" in list[i])
      console.log("... encodedBodySize[" + i + "] = " + list[i].encodedBodySize);
    else
      console.log("... encodedBodySize[" + i + "] = NOT supported");

    if ("transferSize" in list[i])
      console.log("... transferSize[" + i + "] = " + list[i].transferSize);
    else
      console.log("... transferSize[" + i + "] = NOT supported");
  }
}

在W3C Web性能工作组给我们带来的 导航计时 在2012年，它是现在市面上几乎所有的主流浏览器。导航计时定义了一个JavaScript API，用于测量主页的性能。例如：

//导航时间
var t = performance.timing，
    pageloadtime = t.loadEventStart-t.navigationStart，
    dns = t.domainLookupEnd-t.domainLookupStart，
    tcp = t.connectEnd-t.connectStart，
    ttfb = t.responseStart-t.navigationStart;
拥有主页的计时指标很棒，但是要诊断现实世界的性能问题，通常有必要深入研究各个资源。因此，我们拥有更新的 Resource Timing规范。该JavaScript API提供与导航计时类似的计时信息，但为每个单独的资源提供。一个例子是：

//资源计时
var r0 = performance.getEntriesByType("resource")[0]
    加载时间= r0.duration，
    dns = r0.domainLookupEnd-r0.domainLookupStart，
    tcp = r0.connectEnd-r0.connectStart，
    ttfb = r0.responseStart-r0.startTime;