前端性能监控:window.performance
window.performance
是W3C性能小组引入的新的API,目前IE9以上的浏览器都支持。一个performance对象的完整结构如下图所示:
memory
字段代表JavaScript对内存的占用。
navigation
字段统计的是一些网页导航相关的数据:
redirectCount
:重定向的数量(只读),但是这个接口有同源策略限制,即仅能检测同源的重定向;- type 返回值应该是0,1,2 中的一个。分别对应三个枚举值:
- 0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面,比如点一个链接,或者一般的get方式)
- 1 : TYPE_RELOAD (用户通过刷新,包括JS调用刷新接口等方式访问页面)
- 2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)
最重要的是timing
字段的统计数据,它包含了网络、解析等一系列的时间数据。
2.2.1 timing
API
timing
的整体结构如下图所示:
各字段的含义如下:
-
startTime
:有些浏览器实现为navigationStart
,代表浏览器开始unload前一个页面文档的开始时间节点。比如我们当前正在浏览baidu.com,在地址栏输入google.com并回车,浏览器的执行动作依次为:unload当前文档(即baidu.com)->请求下一文档(即google.com)。navigationStart的值便是触发unload当前文档的时间节点。如果当前文档为空,则navigationStart的值等于fetchStart。
redirectStart
和redirectEnd
:如果页面是由redirect而来,则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点;unloadEventStart
和unloadEventEnd
:如果前一个文档和请求的文档是同一个域的,则unloadEventStart
和unloadEventEnd
分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0;fetchStart
是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart
之间,浏览器会检查当前文档的缓存;domainLookupStart
和domainLookupEnd
分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询(比如使用了cache),则两者的值都等于fetchStart
;connectStart
和connectEnd
分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接(比如使用持久化连接webscoket),则两者都等于domainLookupEnd
;secureConnectionStart
:可选。如果页面使用HTTPS,它的值是安全连接握手之前的时刻。如果该属性不可用,则返回undefined。如果该属性可用,但没有使用HTTPS,则返回0;requestStart
代表浏览器发起请求的时间节点,请求的方式可以是请求服务器、缓存、本地资源等;responseStart
和responseEnd
分别代表浏览器收到从服务器端(或缓存、本地资源)响应回的第一个字节和最后一个字节数据的时刻;domLoading
代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState
属性,domLoading
的值就等于readyState
改变为loading
的时间节点;domInteractive
代表浏览器解析html文档的状态为interactive
时的时间节点。domInteractive
并非DOMReady,它早于DOMReady触发,代表html文档解析完毕(即dom tree创建完成)但是内嵌资源(比如外链css、js等)还未加载的时间点;-
domContentLoadedEventStart
:代表DOMContentLoaded
事件触发的时间节点:页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件,HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。
domContentLoadedEventEnd
:代表DOMContentLoaded
事件完成的时间节点,此刻用户可以对页面进行操作,也就是jQuery中的domready时间;domComplete
:html文档完全解析完毕的时间节点;-
loadEventStart
和loadEventEnd
分别代表onload事件触发和结束的时间节点
2.2.2 计算性能指标
可以使用Navigation.timing
统计到的时间数据来计算一些页面性能指标,比如DNS查询耗时、白屏时间、domready等等。如下:
- DNS查询耗时 = domainLookupEnd - domainLookupStart
- TCP链接耗时 = connectEnd - connectStart
- request请求耗时 = responseEnd - responseStart
- 解析dom树耗时 = domComplete - domInteractive
- 白屏时间 = domloadng - fetchStart
- domready时间 = domContentLoadedEventEnd - fetchStart
- onload时间 = loadEventEnd - fetchStart
2.2.3 Resource timing API
Resource timing API是用来统计静态资源相关的时间信息,详细的内容请参考W3C Resource timing。这里我们只介绍performance.getEntries
方法,它可以获取页面中每个静态资源的请求,【以百度移动版首页的logo为例】如下:
可以看到performance.getEntries
返回一个数组,数组的每个元素代表对应的静态资源的信息,比如上图展示的第一个元素对应的资源类型initiatorType
是图片img
,请求花费的时间就是duration
的值。
关于Resource timing API的使用场景,感兴趣的同学可以深入研究。
; (function() { handleAddListener('load', getTiming) function handleAddListener(type, fn) { if(window.addEventListener) { window.addEventListener(type, fn) } else { window.attachEvent('on' + type, fn) } } function getTiming() { try { var time = performance.timing; var timingObj = {}; var loadTime = (time.loadEventEnd - time.loadEventStart) / 1000; if(loadTime < 0) { setTimeout(function() { getTiming(); }, 200); return; } timingObj['重定向时间'] = (time.redirectEnd - time.redirectStart) / 1000; timingObj['DNS解析时间'] = (time.domainLookupEnd - time.domainLookupStart) / 1000; timingObj['TCP完成握手时间'] = (time.connectEnd - time.connectStart) / 1000; timingObj['HTTP请求响应完成时间'] = (time.responseEnd - time.requestStart) / 1000; timingObj['DOM开始加载前所花费时间'] = (time.responseEnd - time.navigationStart) / 1000; timingObj['DOM加载完成时间'] = (time.domComplete - time.domLoading) / 1000; timingObj['DOM结构解析完成时间'] = (time.domInteractive - time.domLoading) / 1000; timingObj['脚本加载时间'] = (time.domContentLoadedEventEnd - time.domContentLoadedEventStart) / 1000; timingObj['onload事件时间'] = (time.loadEventEnd - time.loadEventStart) / 1000; timingObj['页面完全加载时间'] = (timingObj['重定向时间'] + timingObj['DNS解析时间'] + timingObj['TCP完成握手时间'] + timingObj['HTTP请求响应完成时间'] + timingObj['DOM结构解析完成时间'] + timingObj['DOM加载完成时间']); for(item in timingObj) { console.log(item + ":" + timingObj[item] + '毫秒(ms)'); } console.log(performance.timing); } catch(e) { console.log(timingObj) console.log(performance.timing); } } })();
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" /> <script src=""></script> <script type="text/javascript" src=""></script> </head> <body> </body> </html>
相关文章
- CloudStats :一款SaaS 服务器监控工具
- (揭秘监控技术)《潜行追踪》:FBI 给你28天,你也逃不掉,中国版呢?
- [svc]linux性能监控
- 如何自己动手写一个监控系统?
- JMeter PerfMon Metrics Collector性能监控插件
- javaMelody监控javaWeb程序性能
- 使用 New Relic 监控接口服务性能 (APM)
- 树莓派使用MJPG-Streamer实现网络监控
- 第八章 JVM性能监控与故障处理工具(2)
- mysql监控工具sqlprofiler,类似sqlserver的profiler工具
- Mybatis拦截器实现SQL性能监控
- Linux下Java线程具体监控和其dump的分析使用----分析Java性能瓶颈[张振华-Jack]
- 转:Redis监控技巧
- LB层到Real Server之间访问请求的响应时间及HTTP状态码监控及报警设置
- 现代网络性能监控工具应具备何种技能?
- CA推全面云技术监控:帮助组织优化现代动态基础设施性能
- 网络性能监控工具整理
- OpenPower服务使用node-exporter prometheus以及grafana进行性能监控的流程
- 全数字化城市道路视频监控存储解决方案
- 【Java】java 性能监控及工具
- springboot整合actuator实现监控管理与端口暴露
- CentOS7性能监控系统安装
- 性能监控工具的配置及使用 - Spotlight On Oracle(oracle)
- 磁盘IO性能监控(Linux 和 Windows)
- 容器生态圈项目一览:引擎、编排、OS、Registry、监控
- 安卓性能监控(APM)之启动时间监控
- linux 性能监控工具——NAGIOS 和 OVO
- 大数据NiFi(十三):NiFi监控
- 前端性能监控你会监控哪些数据? 如何做?
- 前端性能监控
- 腾讯前端团队是如何做web性能监控的?
- Chrome DevTools - 性能监控
- Linux下性能监控的三把军刀