网页性能检测

    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。

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值