[原创]HTML5 web性能监控策略

web性能重要指标——时长

通常在监控前端页面性能的时候,我们会需要获取到很多的时间戳,比如用户按下回车的时候开始计时,但这个时候,我们统计的js代码并没有加载过来,也无法读取到相关的信息。在HTML5出来以后,用window.performance对象用于监控页面性能,而获取相关时间戳信息则是Performance.timing对象,改对象是一个只读对象,包含了潜在相关的性能信息。

语法

let timingInfo = performance.timing;

浏览器支持

performance.timing属性列表

属性以及代表意义图解

属性详解

navigationStart —— 当前浏览器窗口的前一个网页关闭时,触发unload时的unix时间戳,是新开窗口,值与fetchStart相同;

fetchStart —— 返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳;

redirectStart —— 同域名重定向时的unix时间戳;没有重定向时返回0;

redirectEnd —— 重定向的结束时间戳;

domainLookupStart —— 域名查询开始时的Unix毫秒时间戳。如果使用持久连接,或者信息是从本地缓存获取的,则返回值等同于fetchStart属性的值;

domainLookupEnd —— 域名查询结束时的Unix毫秒时间戳。如果使用持久连接,或者信息是从本地缓存获取的,则返回值等同于fetchStart属性的值;

loadEventStart —— 当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没有发生,返回0;

loadEventEnd —— 当前网页load事件的回调函数运行结束时的Unix毫秒时间戳。如果该事件还没有发生,返回0;

responseStart —— 浏览器从服务器收到(或从本地缓存读取)第一个字节时的Unix毫秒时间戳;

responseEnd —— 浏览器从服务器收到(或从本地缓存读取)最后一个字节时(如果在此之前HTTP连接已经关闭,则返回关闭时)的Unix毫秒时间戳;

domLoading —— 当前网页DOM结构开始解析时(即Document.readyState属性变为“loading”、相应的readystatechange事件触发时)的Unix毫秒时间戳。

domInteractive —— 当前网页DOM结构结束解析、开始加载内嵌资源时(即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时)的Unix毫秒时间戳。

domContentLoadedEventStart —— 当前网页DOMContentLoaded事件发生时(即DOM结构解析完毕、所有脚本开始运行时)的Unix毫秒时间戳。

domContentLoadedEventEnd —— 当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。

domComplete —— 当前网页DOM结构生成时(即Document.readyState属性变为“complete”,以及相应的readystatechange事件发生时)的Unix毫秒时间戳。

参考资料 MDN

https://developer.mozilla.org/en-US/docs/Web/API/Performance/timing

posted @ 2016-11-17 18:25  一凡先生  阅读(1211)  评论(1编辑  收藏  举报