Performance
接口可以获取到当前页面中与性能相关的信息。该类型的对象可以通过调用只读属性 Window.performance
来获得。
1、属性
(1)Performance.navigation
提供了在指定时间内发生的操作相关信息,包括redirectCount和type两个属性:
redirectCount:重定向属性,返回当前页面发生了几次重定向。
type:返回值为0、1、2中的一个。
0: TYPE_NAVIGATE 用户通过常规导航方式访问页面,如果点击一个链接,或者一般的get方式。
1: TYPE_RELOAD 用户通过刷新,包括JS调用刷新接口等方式访问页面。
2: TYPE_BACK_FORWARD 用户通过后退按钮访问页面。
(2)Performance.timeOrigin
返回性能测量开始时间的高精度时间戳。
(3)Performance.memory
是Chrome添加的一个非标准扩展,提供了浏览器基本内存使用情况。
包括以下三个属性:
jsHeapSizeLimit:内存大小限制
totalJSHeapSize:当前js堆栈内存总大小
userdJSHeapSize:所有被使用的js堆栈内存,不能大于totalJSHeapSize,如果大于,则可能出现了内存泄漏
(4)Performance.timing 包括了页面相关的性能信息。
1、参考图:Performance.timing的各阶段
2、Performance.timing属性含义:
- navigationStart:当前浏览器窗口的前一个网页关闭发生unload事件时的Unix毫秒时间戳。如果没有前一个网页,则等于fetchStart属性。
- unloadEventStart:如果有前一个网页,且与当前网页同源,则返回前一个网页unload事件发生时的Unix毫秒时间戳。如果没有前一个网页,或前一个网页与当前网页不同源,则返回值为0。
- unloadEventEnd:如果有前一个网页,且与当前网页同源,则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页,或前一个网页与当前网页不同源,则返回值为0。
- redirectStart:返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转,或者不同源,则返回值为0。
- redirectEnd:返回最后一个HTTP跳转结束时的Unix毫秒时间戳。如果没有跳转,或者不同源,则返回值为0。
- fetchStart:返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。
- domainLookupStart:返回域名查询开始时的Unix毫秒时间戳。如果使用持久连接,或者信息是从本地缓存获取,则返回值等同于fetchStart属性的值。
- domainLookupEnd:返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接,或者信息是从本地缓存获取,则返回值等同于fetchStart属性的值。
- connectStart:返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接,则返回值等同于fetchStart属性的值。
- connectEnd:返回浏览器与服务器之间的连接建立(连接建立指所有的握手和认证过程全部结束)时的Unix毫秒时间戳。如果使用持久连接,则返回值等同于fetchStart属性的值。
- secureConnectionStart:返回浏览器与服务器开始安全连接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接,则返回0。
- requestStart:返回浏览器向服务器发出HTTP请求时(或开始读取本地缓存时)的Unix毫秒时间戳。
- responseStart:返回浏览器从服务器收到(或从本地缓存读取)第一个字节时的Unix毫秒时间戳。
- responseEnd:返回浏览器从服务器收到(或从本地缓存读取)最后一个字节时(如果在此之前HTTP连接已经关闭,则返回关闭时)的Unix毫秒时间戳。
- domLoading:返回当前网页DOM结构开始解析时(即Document.readyState属性变为loading,相应的readystatechange事件触发时)的Unix毫秒时间戳。
- domInteractive:返回当前网页DOM结构解析结束、开始加载内嵌资源时(即Document.readyState属性变为interactive,相应的readystatechange事件触发时)的Unix毫秒时间戳。
- domContentLoadedEventStart:返回当前网页DOMContentLoaded事件发生时(即DOM结构解析完毕、所有脚本开始运行时)的Unix毫秒时间戳。
- domContentLoadedEventEnd:返回当前网页DOMContentLoaded事件结束时的Unix毫秒时间戳。
- domComplete:返回当前网页DOM结构生成时(即Document.reayState属性变为complete,以及相应的readystatechange事件发生时)的Unix毫秒时间戳。
- loadEventStart:返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没发生,返回0。
- loadEventEnd:返回当前网页load事件的回调函数结束时的Unix毫秒时间戳。如果该事件还没发生,返回0。
3、计算性能指标
可以使用Navigation.timing
统计到的时间数据来计算一些页面性能指标,比如DNS查询耗时、白屏时间、domready等等。如下:
- DNS查询耗时 = domainLookupEnd - domainLookupStart
- TCP链接耗时 = connectEnd - connectStart
- request请求耗时 = responseEnd - responseStart
- 解析dom树耗时 = domComplete - domInteractive
- 白屏时间 = domloadng - fetchStart
- domready时间 = domContentLoadedEventEnd - fetchStart
- onload时间 = loadEventEnd - fetchStart
2、方法
(1)Performance.getEntries()
资源测速
(2)Performance.now()
返回一个表示从性能测量时刻开始(即navigationStart)到当前时间经过的毫秒数。可用来计算某个操作,或某个方法执行的耗时:
let t0 = window.performance.now();
doSomething();
let t1 = window.performance.now();
console.log("doSomething函数执行了" + (t1 - t0) + "毫秒.")
(3)Performance.mark()
在浏览器的性能输入缓冲区中创建一个 timestamp,基于给定的 name
performance.mark()给相应的视点做标记。结合performance.measure()使用也可以算出各个时间段的耗时。
(4)Performance.clearMarks()
移除给定的 mark,从浏览器的性能输入缓冲区中
(5)Performance.measure()
在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定的 timestamp
(6)Performance.clearMeasures()
移除给定的 measure,从浏览器的性能输入缓冲区中
(7)Performance.clearResourceTimings()
移除所有的 entryType 是 "resource" 的 performance entries,从浏览器的性能数据缓冲区中
(8)Performance.setResourceTimingBufferSize()
将浏览器的资源 timing 缓冲区的大小设置为 "resource" type performance entry 对象的指定数量
(9)Performance.getEntries()
返回一个 PerformanceEntry 对象的列表,基于给定的 filter
(10)Performance.getEntriesByName()
返回一个 PerformanceEntry 对象的列表,基于给定的 name 和 entry type
(11)Performance.getEntriesByType()
返回一个 PerformanceEntry 对象的列表,基于给定的 entry type
(12)Performance.toJSON()
是一个 JSON 格式转化器,返回 Performance 对象的 JSON 对象
使用performance的这些属性和方法, 能够准确的记录下我们想要的时间, 再加上日志采集等功能的辅助,我们就能很容易的掌握自己网站的各项性能指标了.