网页性能检测

    1、Performance的浏览器兼容

    2、Performance的主要方法、属性

    3、timing

---

如何检测网页性能以及其指标计算?在现代浏览器（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。