码迷,mamicode.com
首页 > 其他好文 > 详细

【chrome】插件开发-教程01(性能数据的获取和分析)

时间:2017-10-12 17:07:26      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:date   try   resource   alt   resolved   文档   lookup   eid   enc   

如何开发浏览器插件请参考:【chrome】插件开发-教程00(如何开发插件)

一、页面加载数据(timing)

我们如何来测量网页的性能以及静态资源的加载情况了,现代浏览器提供了一个window.performance的对象来记录本次请求相关的所有数据:

技术分享

我们先看看页面请求相关的timing里面的数据,单位都是ms,标准的时间戳,下面是其具体代表的含义:

技术分享

navigationStart

当load/unload动作被触发时,也可能是提示关闭当前文档时(即回车键在url地址栏中按下,页面被再次刷新,submit按钮被点击)。如果当前窗口中没有前一个文档,那么navigationStart的值就是fetchStart。 

redirectStart

它可能是页面重定向时的开始时间(如果存在重定向的话)或者是0

unloadEventStart:

如果被请求的文档来自于前一个同源(同源策略)的文档,那么该属性存储的是浏览器开始卸载前一个文档的时刻。否则的话(前一个文档非同源或者没有前一个文档),为0。

unloadEventEnd:

表示同源的前一个文档卸载完成的时刻。如果前一个文档不存在或者非同源,则为0。

redirectEnd

如果存在重定向的话,redirectEnd表示最后一次重定向后服务器端response的数据被接收完毕的时间否则的话就是0。

fetchStart

fetchStart是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间,浏览器会检查当前文档的缓存。

domainLookupStart

这个属性是指当浏览器开始检查当前域名的DNS之前的那一时刻。如果因为任何原因没有去检查DNS(即浏览器使用了缓存,持久连接,或者本地资源),那么它的值等同于fetchStart。

domainLookupEnd

指浏览器完成DNS检查时的时间。如果DNS没有被检查,那么它的值等同于fetchStart。

connectStart

当浏览器开始于服务器连接时的时间。如果资源取自缓存(或者服务器由于其他任何原因没有建立连接,例如持久连接),那么它的值等同于domainLookupEnd。

connectEnd

当浏览器端完成与服务器端建立连接的时刻。如果没有建立连接它的值等同于domainLookupEnd。

secureConnectionStart

可选。如果页面使用HTTPS,它的值是安全连接握手之前的时刻。如果该属性不可用,则返回undefined。如果该属性可用,但没有使用HTTPS,则返回0。

responseStart

指客户端收到从服务器端(或缓存、本地资源)响应回的第一个字节的数据的时刻。

responseEnd

指客户端收到从服务器端(或缓存、本地资源)响应回的最后一个字节的数据的时刻。

domLoading

指document对象创建完成的时刻。

domInteractive

指文档解析完成的时刻,包括在“传统模式”下被阻塞的通过script标签加载的内容(除了使用defer或者async属性异步加载的情况)。

domContentLoadedEventStart

当DOMContentLoaded事件触发之前,浏览器完成所有script(包括设置了defer属性但未设置async属性的script)的下载和解析之后的时刻。

domContentLoadedEventEnd

当DOMContentLoaded事件完成之后的时刻。它也是javascript类库中DOMready事件触发的时刻。

domComplete

如果已经没有任何延迟加载的事件(所有图片的加载)阻止load事件发生,那么该时刻将会将document.readyState属性设置为"complete",此时刻就是domComplete。

loadEventStart

该属性返回的是load事件刚刚发生的时刻,如果load事件还没有发生,则返回0。

loadEventEnd

该属性返回load事件完成之后的时刻。如果load事件未发生,则返回0。

二、页面静态资源加载数据(resources)

performance中还记录了页面加载的所有资源的请求数据,访问方式如下:

performance.getEntriesByType(‘resource‘),返回书的是一个静态资源的列表数据

技术分享

EntryType有如下的一些值:(https://www.w3.org/wiki/Web_Performance/EntryType

技术分享

 

【chrome】插件开发-教程01(性能数据的获取和分析)

标签:date   try   resource   alt   resolved   文档   lookup   eid   enc   

原文地址:http://www.cnblogs.com/northmountain/p/7656721.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!