前端性能监控-window.performance
在同样的网络环境下,有两个同样能满足你的需求的网站,一个唰的一下就加载出来了,另一个白屏转圈转了半天内容才出来,如果让你选择,你会用哪一个?
Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。
页面的性能问题是前端开发中一个重要环节,但一直以来我们没有比较好的手段,来检测页面的性能。直到W3C性能小组引入的新的API window.performance,目前IE9以上的浏览器都支持。它是一个浏览器中用于记录页面加载和解析过程中关键时间点的对象。放置在global环境下,通过JavaScript可以访问到它。
使用性能API
var performance = window.performance || window.msPerformance || window.webkitPerformance;
if (performance) {// your code
}
performance.timeOrigin是一系列时间点的基准点,精确到万分之一毫秒。
performance.timing是一系列关键时间点,它包含了网络、解析等一系列的时间数据。
下面是对这些时间点进行解释
timing: {// 同一个浏览器上一个页面卸载(unload)结束时的时间戳。如果没有上一个页面,这个值会和fetchStart相同。navigationStart: 1543806782096,// 上一个页面unload事件抛出时的时间戳。如果没有上一个页面,这个值会返回0。unloadEventStart: 1543806782523,// 和 unloadEventStart 相对应,unload事件处理完成时的时间戳。如果没有上一个页面,这个值会返回0。unloadEventEnd: 1543806782523,// 第一个HTTP重定向开始时的时间戳。如果没有重定向,或者重定向中的一个不同源,这个值会返回0。redirectStart: 0,// 最后一个HTTP重定向完成时(也就是说是HTTP响应的最后一个比特直接被收到的时间)的时间戳。// 如果没有重定向,或者重定向中的一个不同源,这个值会返回0. redirectEnd: 0,// 浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。fetchStart: 1543806782096,// DNS 域名查询开始的UNIX时间戳。//如果使用了持续连接(persistent connection),或者这个信息存储到了缓存或者本地资源上,这个值将和fetchStart一致。domainLookupStart: 1543806782096,// DNS 域名查询完成的时间.//如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等domainLookupEnd: 1543806782096,// HTTP(TCP) 域名查询结束的时间戳。//如果使用了持续连接(persistent connection),或者这个信息存储到了缓存或者本地资源上,这个值将和 fetchStart一致。connectStart: 1543806782099,// HTTP(TCP) 返回浏览器与服务器之间的连接建立时的时间戳。// 如果建立的是持久连接,则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。connectEnd: 1543806782227,// HTTPS 返回浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接,则返回0。secureConnectionStart: 1543806782162,// 返回浏览器向服务器发出HTTP请求时(或开始读取本地缓存时)的时间戳。requestStart: 1543806782241,// 返回浏览器从服务器收到(或从本地缓存读取)第一个字节时的时间戳。//如果传输层在开始请求之后失败并且连接被重开,该属性将会被数制成新的请求的相对应的发起时间。responseStart: 1543806782516,// 返回浏览器从服务器收到(或从本地缓存读取,或从本地资源读取)最后一个字节时//(如果在此之前HTTP连接已经关闭,则返回关闭时)的时间戳。responseEnd: 1543806782537,// 当前网页DOM结构开始解析时(即Document.readyState属性变为“loading”、相应的 readystatechange事件触发时)的时间戳。domLoading: 1543806782573,// 当前网页DOM结构结束解析、开始加载内嵌资源时(即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时)的时间戳。domInteractive: 1543806783203,// 当解析器发送DOMContentLoaded 事件,即所有需要被执行的脚本已经被解析时的时间戳。domContentLoadedEventStart: 1543806783203,// 当所有需要立即执行的脚本已经被执行(不论执行顺序)时的时间戳。domContentLoadedEventEnd: 1543806783216,// 当前文档解析完成,即Document.readyState 变为 'complete'且相对应的readystatechange 被触发时的时间戳domComplete: 1543806783796,// load事件被发送时的时间戳。如果这个事件还未被发送,它的值将会是0。loadEventStart: 1543806783796,// 当load事件结束,即加载事件完成时的时间戳。如果这个事件还未被发送,或者尚未完成,它的值将会是0.loadEventEnd: 1543806783802
}
这些参数非常有用,可以帮助我们获取页面的Domready时间、onload时间、白屏时间等,以及单个页面资源在从发送请求到获取到rsponse各阶段的性能参数。
对我们比较有用的页面性能数据大概包括如下几个,这些参数是通过上面的performance.timing各个属性的差值组成的,它是精确到毫秒的一个值,计算方法如下:
- 重定向耗时:redirectEnd - redirectStart
- DNS查询耗时 :domainLookupEnd - domainLookupStart
- TCP链接耗时 :connectEnd - connectStart
- HTTP请求耗时 :responseEnd - responseStart
- 解析dom树耗时 : domComplete - domInteractive
- 白屏时间 :responseStart - navigationStart
- DOMready时间 :domContentLoadedEventEnd - navigationStart
- onload时间:loadEventEnd - navigationStart,也即是onload回调函数执行的时间。
;
(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);}}
})();
如何优化?
<html>
<head><title>腾讯网</title><link rel="dns-prefetch" href="//mat1.gtimg.com" /><link rel="dns-prefetch" href="//inews.gtimg.com" /><link rel="dns-prefetch" href="//wx.qlogo.cn" /><link rel="dns-prefetch" href="//coral.qq.com" /><link rel="dns-prefetch" href="//pingjs.qq.com" />
<script async type="text/javascript" src="app1.js"></script>
<script defer type="text/javascript" src="app2.js"></script>
资源性能API
- name表示:资源名称,也是资源的绝对路径,可以通过performance.getEntriesByName(name属性的值),来获取这个资源加载的具体属性
- entryType表示:资源类型 “resource”,还有“navigation”, “mark”, 和 “measure”另外3种。
- initiatorType表示:请求来源 “link”,即表示 标签,还有“script”即
Timing-Allow-Origin: https://qq.com
方法集合
let t0 = window.performance.now();
doSomething();
let t1 = window.performance.now();
console.log("doSomething函数执行了" + (t1 - t0) + "毫秒.")
performance.mark()
mark方法用来自定义添加标记时间。使用方法如下:
var nameStart = 'markStart';var nameEnd = 'markEnd';// 函数执行前做个标记window.performance.mark(nameStart);for (var i = 0; i < n; i++) {doSomething}// 函数执行后再做个标记window.performance.mark(nameEnd);// 然后测量这个两个标记间的时间距离,并保存起来var name = 'myMeasure';window.performance.measure(name, nameStart, nameEnd);
保存后的值可以通过 performance.getEntriesByname( ‘myMeasure’ )或者 performance.getEntriesByType(‘measure’)查询。
Performance.clearMeasures()
从浏览器的性能输入缓冲区中移除自定义添加的 measure
Performance.getEntriesByName()
返回一个 PerformanceEntry 对象的列表,基于给定的 name 和 entry type
Performance.getEntriesByType()
返回一个 PerformanceEntry 对象的列表,基于给定的 entry type
Performance.measure()
在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定名称的时间戳,见上例
Performance.toJSON()
是一个 JSON 格式转化器,返回 Performance 对象的 JSON 对象
资源缓冲区监控
function buffer_full(event) {console.log("WARNING: Resource Timing Buffer is FULL!");performance.setResourceTimingBufferSize(200);
}
function init() {// Set a callback if the resource buffer becomes filledperformance.onresourcetimingbufferfull = buffer_full;
}
<body "init()">
使用performance的这些属性和方法,能够准确的记录下我们想要的时间,再加上日志采集等功能的辅助,我们就能很容易的掌握自己网站的各项性能指标了。
兼容性
目前主流浏览器虽然都已支持performance对象,但是并不能支持它上面的全部属性和方法,有些细微的差别。本文主要依据chrome和qq浏览器测试了相关属性和方法,均可使用。
前端性能监控-window.performance相关推荐
- 谷歌测试工程师分享前端性能监控利器Performance
最近在写一个监控脚本,终于有机会接触到了这一块,整理后写下了本文. Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到 ...
- Performance — 前端性能监控利器
2019独角兽企业重金招聘Python工程师标准>>> 最近在写一个监控脚本,终于有机会接触到了这一块,整理后写下了本文. Performance是一个做前端性能监控离不开的API, ...
- Performance --- 前端性能监控
阅读目录 一:什么是Performance? 二:使用 performance.timing 来计算值 三:前端性能如何优化? 四:Performance中方法 五:使用performane编写小工具 ...
- 深入理解前端性能监控—Performance + 腾讯superProfiler(基于Performance API的性能监控工具)
https://segmentfault.com/a/1190000018785911 在同样的网络环境下,有两个同样能满足你的需求的网站,一个唰的一下就加载出来了,另一个白屏转圈转了半天内容才出来, ...
- 前端白屏问题_深入理解前端性能监控
在同样的网络环境下,有两个同样能满足你的需求的网站,一个唰的一下就加载出来了,另一个白屏转圈转了半天内容才出来,如果让你选择,你会用哪一个? 页面的性能问题是前端开发中一个重要环节,但一直以来我们没有 ...
- py获取前端的参数_鹅厂技术说 | 深入理解前端性能监控
作者系 腾讯新闻前端团队 大鹏哥,本文已得到授权. 导语:在同样的网络环境下,有两个同样能满足你的需求的网站,一个唰的一下就加载出来了,另一个白屏转圈转了半天内容才出来,如果让你选择,你会用哪一个? ...
- 前端性能监控相关指标
前端性能监控相关指标 最初,评价前端页面加载性能有两个指标:DOMContentLoaded和load事件,分别代表DOM构造完成和首屏资源加载完成. DOM 文档加载步骤: 解析 html 结构 加 ...
- 前端性能监控技术方案
前端性能监控主要考虑以下几个方面 1. 静态性能 静态性能包括:包体积分析.lightHouse 2. 动态性能 (1)首屏:FMP.TTI.FCP.FP.满开比.秒开率.页面渲染数据时长 (2)卡顿 ...
- 7 天打造前端性能监控系统
2019独角兽企业重金招聘Python工程师标准>>> Day1.为什么要监控性能? "If you cannot measure it, you cannot impro ...
最新文章
- Alpha阶段项目总结
- idea Debug快捷键
- Android Service 全解析
- loadrunner目录分析
- 重置npm设置_密码重置用户流程4部曲
- Winform中在ZedGraph中最多可以添加多少条曲线
- matlab 仿真模型,MATLAB Simulink 仿真
- 【深度学习】实战深度学习检测疟疾
- 从Zipkin到Jaeger,Uber的分布式追踪之道tchannel
- web性能測試工具-沒還有實驗-URL收集_无需整理
- HDU - 2444 The Accomodation of Students(二分图判断+二分图最大匹配)
- flink check-point save-point理解
- HDU 6750 Function(莫比乌斯反演)(2020百度之星初赛1)
- 如何确认自己的电脑是否可以更新到win11
- 远程会议总卡顿?8 个“小白”办法一看就会!
- php实现发表情分页_php实现分页效果
- linux deepin配置优化:解决deepin v20.5不能自动降频导致CPU风扇一直狂转吹热气的问题
- VS2019 MFC ODBC 操作SQL SERVER 数据库
- win7一体机分区不见的文件如何恢复
- 1月书讯:Hello 2021! (下)