如何检测网页性能以及其指标计算?在现代浏览器(ie9+)中,可以基于web API中提供的Performance来统计。
1、Performance的浏览器兼容性
2、Performance的主要方法、属性
- 属性
navigation:在指定的时间段里发生的操作相关信息,包括页面是加载还是刷新、发生了多少次重定向等等。
timing: 返回PerformanceTiming对象,包含请求发送到响应的各个详细时间。
- 方法
Performance提供的方法中,主要是针对mark和PerformanceEntry操作方法。
1)对mark操作方法有:
mark(name):将当前时间的性能数据timestamp写入缓存中。
clearMaks(name):将给定的 mark 从浏览器的性能输入缓冲区中移除。
2)对PerformanceEntry操作方法有:
getEntries(key):返回给定key 的PerformanceEntry,如果key为空则返回所有。
3、timing
Performance的重要只读属性timing,返回PerformanceTiming包含了页面性能相关的详细信息。
字段名 | 含义 | |
unloadEventStart/ unloadEventEnd | 前一个网页与当前网页属于同一域名,则返回前一个网页的unload事件发生/结束时的Unix毫秒时间戳 | |
redirectStart/ redirectEnd | 返回第一个HTTP跳转开始/跳转结束时的Unix毫秒时间戳 | |
fetchStart | 浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳 | |
domainLookupStart/ domainLookupEnd | 返回域名查询开始/结束时的Unix毫秒时间戳 | |
connectStart/ connectEnd | 返回HTTP请求开始向服务器发送时/浏览器与服务器之间的连接建立时的Unix毫秒时间戳; [连接建立指的是所有握手和认证过程全部结束] | |
responseStart/ responseEnd | 返回浏览器从服务器收到/收到(或从本地缓存读取)第/最后一个字节时的Unix毫秒时间戳 | |
requestStart | 返回浏览器向服务器发出HTTP请求时(或开始读取本地缓存时)的Unix毫秒时间戳 | |
domLoading | 返回当前网页DOM结构开始解析时的Unix毫秒时间戳 | Document.readyState==loading |
domInteractive | 返回当前网页DOM结构结束解析、开始加载内嵌资源时的Unix毫秒时间戳 | Document.readyState==interactive |
domContentLoadedEventStart | 返回当前网页DOMContentLoaded事件发生时(即DOM结构解析完毕、所有脚本开始运行时)的Unix毫秒时间戳 | |
domContentLoadedEventEnd | 返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳 | |
domComplete | 返回当前网页DOM结构生成时(即Document.readyState属性变为“complete”,以及相应的readystatechange事件发生时)的Unix毫秒时间戳 | Document.readyState==complete |
navigationStart | 浏览器处理当前网页的启动时间 |
经典鱼骨图:
H5页面容器各关键点的时耗计算方式如下:
准备耗时 =domainLookupStart - navigationStart;
重定向耗时 =redirectEnd - redirectStart;
DNS解析耗时= domainLookupEnd - domainLookupStart;
ip连接耗时= connectEnd - connectStart;
首包耗时 = responseEnd - requestStart;
dom处理 = domComplete - domLoading;
页面白屏时间:取值:domLoading - navigationStart;
首屏时间:取值:loadEventStart- navigationStart;前端开发也可根据业务侧理解的首屏
手动打点tag,取值为:tagTime - navigationStart;
可交互 = domContentLoadedEventEnd - timing.navigationStart;
页面完全加载耗时 = loadEventEnd - timing.navigationStart。