performance介绍

performance是前端性能监控的API。可以获取页面中的性能相关的信息。通过window.performance可以获取performance对象。

在控制台上输入window.performance可以获取当前页面性能的一些信息。

performance属性

• eventCounts: 事件数量（目前为实验阶段,MDN上仍无具体解释）。
• memory: 基本内存使用情况（chrome扩展的非标准属性）
• • jsHeapSizeLimit: 内存大小限制。
• • totalJSHeapSize: 可使用的内存。
• • usedJSHeapSize: JS对象(包括V8引擎内部对象)占用的内存，不能大于totalJSHeapSize，如果大于，有可能出现了内存泄漏。
• navigation: 当前页面操作相关信息（页面的加载方式及重定向次数）
• onresourcetimingbufferfull: 一个回调的 EventTarget，当浏览器的资源时间性能缓冲区已满时会触发
• timeOrigin：性能测试开始时间戳（实验阶段）
• timing: PerformanceTiming 对象，包含延迟相关的性能信息（已从web标准中删除，但一些浏览器仍支持，尽量不要使用，使用 PerformanceNavigationTiming 替代）

先来重点看看timing、navigation、timeOrigin、onresourcetimingbufferfull这四个。

timing

从输入url到用户可以使用页面的全过程时间统计，会返回一个PerformanceTiming对象，单位均为毫秒。

• redirectStart 第一次重定向开始时时间戳，若无重定向或上次重定向不同源则为0
• redirectEnd 最后一次重定向完成，即HTTP响应的最后一个字节返回时的时间戳，若无重定向或上次重定向不同源则为0
• fetchStart 浏览器准备通过HTTP请求去获取页面的时间戳
• domainLookupStart 域名查询开始时间戳。若为持久连接，或从本地缓存获取则等同于fetchStart
• domainLookupEnd 域名查询结束时的时间戳。若为持久连接，或从本地缓存获取则等同于fetchStart
• connectStart 浏览器与服务器开始建立连接的时间戳，若为持久连接，则等同于fetchStart
• secureConnectionStart 浏览器与服务器开始安全链接握手的时间戳。若不要求安全连接则为0
• connectEnd 浏览器与服务器连接建立完成的时间戳，即所有握手和认证过程全部完成
• requestStart 浏览器向服务器发出HTTP请求（或开始读取本地缓存时）的时间戳
• responseStart 浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳
• responseEnd 浏览器从服务器收到（或从本地缓存读取）最后一个字节时（若在此之前HTTP连接已经关闭，则返回关闭时）的时间戳
• domLoading 当前网页DOM开始加载的时间戳，即document.readyState属性变为loading，且触发对应readyStateChange事件时。
• domInteractive 当前网页DOM解析完成、开始加载子资源（如css、图片等）的时间戳，即document.readyState属性变为interactive，且触发对应readyStateChange事件时。
• domComplete 当前网页DOM解析完成且内嵌资源加载完成的时间戳，即document.readyState属性变为complete，且触发对应readyStateChange事件时。
• domContentLoadedEventStart 当前网页DOM加载完成、所有脚本开始运行的时间戳，即document的DOMContentLoaded事件被触发时。
• domContentLoadedEventEnd 当前网页DOM加载完成、所有脚本运行完成的时间戳。
• loadEventStart 当前网页加载完成，window的load事件回调函数开始执行的时间戳，若该事件还没发生则为0。
• loadEventEnd 当前网页加载完成，window的load事件回调函数开始执行的时间戳，若该事件还没发生则为0。
• navigationStart 当前浏览器窗口的前一个网页关闭，发生unload事件时的时间戳。如果没有前一个网页，则等于fetchStart
• unloadEventStart 如果前一个网页与当前网页同域，则为前一个网页的unload事件发生时的时间戳。如果没有前一个网页或之前网页跳转不同域，则为0。
• unloadEventEnd 如果前一个网页与当前网页同域，则为前一个网页的unload事件回调执行结束的时间戳。如果没有前一个网页或之前网页跳转不同域，则为0。

timing对象各个关键时间点的含义如下所示：

根据timing对象提供的时间点，可以进行以下计算:

• DNS查询耗时: domainLookupEnd - domainLookupStart
• TCP链接耗时: connectEnd - connectStart
• request请求耗时: responseEnd - responseStart
• 解析dom树耗时: domComplete - domInteractive
• 白屏时间: responseStart - navigationStart
• domready时间(用户可操作时间节点): domContentLoadedEventEnd - navigationStart
• onload时间(总下载时间): loadEventEnd - navigationStart

封装以上几个方法：

function getPerformanceTiming() {
    
  const performance = window.performance;
  if(!performance) {
    
    console.log('该浏览器暂不支持performance');
    return;
  }
  const timing = performance.timing;
  return {
    
    dnsTime: timing.domainLookupEnd - timing.domainLookupStart,
    tcpTime: timing.connectEnd - timing.connectStart,
    requestTime: timing.responseEnd - timing.responseStart,
    domParse: timing.domComplete - timing.domInteractive,
    blankTime: timing.responseStart - timing.navigationStart,
    domReady: timing.domContentLoadedEventEnd - timing.navigationStart,
    loadTime: timing.loadEventEnd - timing.navigationStart
  }
}

navigation

该属性是一个对象，有两个属性值

• redirectCount: 重定向次数（但是这个接口有同源策略限制，即仅能检测同源的重定向）
• type: 操作类型
• • TYPE_NAVIGATE(0): 当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在url中直接输入地址
• • TYPE_RELOAD(1): 点击刷新页面按钮或者通过Location.reload()方法显示的页面
• • TYPE_BACK_FORWARD(2): 页面通过历史记录和前进后退访问时
• • TYPE_UNDEFINED(255): 任何未由上述值定义的导航类型

timeOrigin

返回性能测量开始时的时间的高精度时间戳。

resourcetimingbufferfull

performance方法

getEntries

获取所有资源请求的时间数据,这个函数返回一个按startTime排序的对象数组，数组成员除了会自动根据所请求资源的变化而改变以外，还可以用mark(),measure()方法自定义添加，该对象的属性中除了包含资源加载时间还有以下五个属性。

• name: 资源名称，是资源的绝对路径或调用mark、measure方法自定义的名称
• startTime: 开始时间
• duration：加载时间
• entryType: 资源类型，entryType类型不同数组中的对象结构也不同
• initiatorType: 谁发起的请求

entryType类型:

值	对象类型	描述
mark	PerformanceMark	通过mark方法添加到数组中的对象
measure	PerformanceMeasure	通过measure方法添加
paint	PerformancePaintTiming	值为first-paint’首次绘制、'first-contentful-paint’首次内容绘制。
resource	PerformanceResourceTiming	所有资源加载时间，用处最多
navigation	PerformanceNavigationTiming	导航相关信息
element	PerformanceElementTiming	元素的加载时间
longtask	PerformanceLongTaskTiming	长任务实例

//根据entryType类型返回的不同对象

PerformanceMark:{
      //通过mark()方法添加的对象
    entryType："mark"
    name：调用mark()方法时自定义的名字
    startTime: 做标记的时间
    duration：0
}

PerformanceMeasure:{
      //通过measure()方法添加的对象
    entryType："measure"
    name：调用measure()方法时自定义的名字
    startTime: 开始量的时间
    duration：标记的两个量的时间间隔
}
PerformancePaintTiming:{
     // Chrome 60 新增类型
    entryType："paint"
    name：first-paint" 或 "first-contentful-paint"
    startTime: 绘制的时间戳
    duration： 0 
}
PerformanceResourceTiming:{
      //可以用来做一个精准的进度条
    entryType："resource"
    name：资源的绝对路径,即URL
    startTime: 即将抓取资源的时间，
    duration： responseEnd - startTime
    initiatorType：略！/:傲娇脸
    //其他属性请参考performance.timing
}
PerformanceNavigationTiming:{
    
    entryType："navigation"
    name：本页路由，即地址栏看到的地址
    startTime: 0
    duration： loadEventEnd - startTime 
    initiatorType："navigation"
    //其他属性请参考performance.timing
}

initiatorType类型:

发起对象	值	描述
a Element	link/script/img/iframe等	通过标签形式加载的资源，值是该节点名的小写形式
a CSS resourc	css	通过css样式加载的资源，比如background的url方式加载资源
a XMLHttpRequest object	xmlhttprequest/fetch	通过xhr加载的资源
a PerformanceNavigationTiming object	navigation	当对象是PerformanceNavigationTiming时返回

getEntriesByName(name,type[optional])，getEntriesByType(type)

• name: 想要筛选出的资源名
• type: entryType的值中一个
  返回值仍是一个数组，这个数组相当于getEntries()方法经过所填参数筛选后的一个子集

clearResourceTimings()

该方法无参数无返回值，可以清楚目前所有entryType为"resource"的数据，用于写单页应用的统计脚本非常有用。

setResourceTimingBufferSize

setResourceTimingBufferSize(maxSize)：设置浏览器性能测量缓冲区中 可维持的resource 类型 entry 对象的最大数量。

标记相关

• mark: 使用name名称创建一个当前时间戳标记。
• mesure: 使用 name 名称创建一个从startMark开始到endMark结束的测量
• clearMarks: 清除标记
• clearMeasures: 清除测量

mark、clearMarks

语法：

performance.mark(name);

// 创建两个mark
performance.mark('start');
performance.mark('end');

perform.clearMarks();

clearMarks语法有两种

performance.clearMarks();
performance.clearMarks(name);

当没有传递name参数时，删除所有的mark，传递name则删除指定的mark。

measure、clearMeasures

measure语法

performance.measure(name, startMark, endMark);

performance.mark('start');
setTimeout(() => {
    
  performance.mark('end');
  performance.measure('time', 'start', 'end')
}, 2000)

clearMeasures语法也有两种

performance.clearMeasures();
performance.clearMeasures(name);

当没有传递name参数时，删除所有的measure，传递name则删除指定的measure。

now

performance.now()是当前时间与performance.timing.navigationStart的时间差，以微秒（百万分之一秒）为单位的时间，与 Date.now()-performance.timing.navigationStart的区别是不受系统程序执行阻塞的影响，因此更加精准。

toJSON

一个 JSON 格式转化器，返回 Performance 对象的 JSON 对象。