[原创]HTML5 web性能监控策略
2016-11-17 18:25
148 查看
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相关文章推荐
- web性能测试需要监控IIS的哪些性能指标 --http://bbs.51testing.com/thread-132211-1-1.html
- TpTp Web程序性能监控
- Web服务器性能监控分析与优化
- html5[1]:优化Android Webview性能
- 通过javamelody监控web应用的性能指标
- (原创)两年前写的一个关于六款WEB上传组件性能测试与比较
- Web服务器性能监控分析与优化
- java web服务器性能监控工具JavaMelody
- 利用 HTML5 草案的 API 进行前端性能监控
- zabbix监控web网站的性能
- Web性能测试需监控的IIS性能指标
- web性能监控与分析
- html5 强化了 Web 网页的表现性能 追加了本地数据库等 Web 应用的功能
- Web服务器性能监控分析与优化
- Centos 查看web日志技巧 (涉及到内容较多,性能,安全,进程,命令网络监控...都有)
- Web性能测试需监控的IIS性能指标
- PHP性能监控软件XHProf的安装和使用(原创)
- [原创]Linux性能监控分析工具nmon介绍
- [原创]SpotLight性能监控工具使用介绍
- Web站点性能监控的工具