版权声明:转载请注明出处 https://blog.csdn.net/GG9527li/article/details/86683095
首先以谷歌浏览器为例子,IE,火狐,等浏览器的查看代码略有不同,本文章都以谷歌浏览器作为说明。
如上图,在console中输入window.performance.timing
然后页面显示以下的信息:
.navigationStart 准备加载页面的起始时间
.unloadEventStart 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间
.unloadEventEnd 如果前一个文档和当前文档同源,返回前一个文档开始unload结束的时间
.redirectStart 如果有重定向,这里是重定向开始的时间.
.redirectEnd 如果有重定向,这里是重定向结束的时间.
.fetchStart 开始检查缓存或开始获取资源的时间
.domainLookupStart 开始进行dns查询的时间
.domainLookupEnd dns查询结束的时间
.connectStart 开始建立连接请求资源的时间
.connectEnd 建立连接成功的时间.
.secureConnectionStart 如果是https请求.返回ssl握手的时间
.requestStart 开始请求文档时间(包括从服务器,本地缓存请求)
.responseStart 接收到第一个字节的时间
.responseEnd 接收到最后一个字节的时间.
.domLoading ‘current document readiness’ 设置为 loading的时间 (这个时候还木有开始解析文档)
.domInteractive 文档解析结束的时间
.domContentLoadedEventStart DOMContentLoaded事件开始的时间
.domContentLoadedEventEnd DOMContentLoaded事件结束的时间
.domComplete current document readiness被设置 complete的时间
.loadEventStart 触发onload事件的时间
.loadEventEnd onload事件结束的时间
其中包含几个很重要的性能指标:
白屏时间 = domloadng - fetchStart
TCP链接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
DNS查询耗时 = domainLookupEnd - domainLookupStart
domready时间 = domContentLoadedEventEnd - fetchStart
onload时间 = loadEventEnd - fetchStart
当前测试网页打开速度则以首页图片加载完整后作为衡量的标准!
'首屏图片加载完成 : ',window.lastImgLoadTime - window.performance.timing.navigationStart); //在最后一张图出来的时候打时间点
。
最开始通过原生的ajax传输这个数据到后台失败,发现是因为无法进行跨域请求。最后通过jsonp get 请求将我们需要的数据发送到后端
需要监控的需要在script 中加入如下这句话(出自w3cheool):
<script>
sniffer.report_url = 'http://127.0.0.1:9000/report/'; #监测结果汇报地址
sniffer.bandwith_test_img = 'http://www.baidu.com'; #如果要测试用户带宽,指定下载测试图片
sniffer.site_id = 1; #这是在服务器端帮这个站点分配的站点id
sniffer.bandwith_test_img_size = 2500; #写清楚你要测试下载的图片大小,不测试带宽的话不需要
sniffer.collect(sniffer); #开始收集数据并向服务器端汇报
</script>
后面将继续讲解如何通过jsonp,发送数据到后端。后端根据时间画出对应的时间波动图