你了解 Performance Timeline Level 2 吗?
什么是 Performance Timeline?
Performance Timeline
是W3C性能小组提出的一个规范,定义了让开发者在应用整个生命周期内收集各种性能指标的接口。
最新的Performance Timeline Level 2
标准,取代了第一版Performance Timeline
标准,它包括了以下三点:
- 扩展了
Performance
接口的基本定义 - 在Web Workers中暴露了
PerformanceEntry
- 增加了
PerformanceObserver
的支持
Performance Timeline 在 Node.js
值得注意的是,在Node.js里同样遵循W3C的Performance Timeline
规范,实现了 Performance Hooks 接口。Performance Hooks 的API和现代浏览器中实现的 Performance API 是一致的。
在浏览器中,我们可以使用 window 对象取得window.performance
和 window.PerformanceObserver
,而在 Node.js 程序中需要 perf_hooks 取得性能对象,如下:
const { PerformanceObserver, performance } = require('perf_hooks');
复制代码
浏览器兼容性
- performance在浏览器中的兼容性
- PerformanceObserver在浏览器中的兼容性
W3C性能小组鼓励开发人员在浏览器兼容性允许的情况下,尽可能使用 PerformanceObserver。另外,新的性能API和指标可能只能通过PerformanceObserver 接口获得。
performance 和 PerformanceObserver 的使用
window.performance
使用window.performance
,我们可以这样去度量某个函数的性能。
function init() {performance.mark("startWork");doWork(); performance.mark("endWork");performance.measure("work", "startWork", "endWork")measurePerf();}function measurePerf() {performance.getEntries().map(entry => JSON.stringify(entry, null, 2)).forEach(json => console.log(json));}
复制代码
在上述代码中,我们使用了performance.mark
和performance.measure
来记录性能记录的数据。
performance.measure
方法会根据 startMark 和 endMark 对应的,由 performance.mark
产生的两条记录,来产生一条 entryType 为 'measure' 的新记录,并计算运行时长。
然后代码里使用了performance.getEntries
来获取浏览器缓冲区中所有的性能数据记录。
当然,我们也可以使用
performance.getEntriesByName
获取指定 entryType 的性能记录。
window.PerformanceObserver
正如上文所述,我们要想获得某项性能记录,需要知道指定的性能事件已经发生(或者使用定时轮训的方式),主动调用performance.getEntries
或者performance.getEntriesByName
来获得。
为了解决这个问题,在Performance Timeline Level 2
中,除了扩展了Performance
的基本定义以外,还增加了PerformanceObserver
接口。
顾名思义,PerformanceObserver
在浏览器内部对Performance
实现了观察者模式,也是现代浏览器支持的几个 Observer 之一。
它解决了以下3点问题:
- 避免不知道性能事件啥时候会发生,需要重复轮训timeline获取记录。
- 避免产生重复的逻辑去获取不同的性能数据指标
- 避免其他资源需要操作浏览器性能缓冲区时产生竞态关系。
在兼容Performance Timeline Level 2
的浏览器或者 Node.js 中,可以这样写:
const userTimingObserver = new PerformanceObserver(list => {list.getEntries().map(({ name, entryType, startTime, duration }) => {const obj = {"Duration": duration,"Entry Type": entryType,"Name": name,"Start Time": startTime,};return JSON.stringify(obj, null, 2);}).forEach(console.log);userTimingObserver.disconnect();
});
userTimingObserver.observe({entryTypes: ["mark", "measure"]});
复制代码
另外有必要介绍一下 performanceObserver.observe
函数,它接受两个参数entryTypes
和buffered
。
- entryTypes 声明需要观察哪几类性能数据
- buffered 声明回调函数是立即同步执行还是异步执行,例子如下
const {performance,PerformanceObserver
} = require('perf_hooks');const obs = new PerformanceObserver((list, observer) => {// 同步执行三次. 每次`list` 仅包含一项 item.
});
obs.observe({ entryTypes: ['mark'] });for (let n = 0; n < 3; n++)performance.mark(`test${n}`);
复制代码
const {performance,PerformanceObserver
} = require('perf_hooks');const obs = new PerformanceObserver((list, observer) => {// 执行一次. `list` 包含3个 items.
});
obs.observe({ entryTypes: ['mark'], buffered: true });for (let n = 0; n < 3; n++)performance.mark(`test${n}`);
复制代码
总结
在Performance Timeline Level 2
规范中,扩充了performance
的定义,并增加了PerformanceObserver
的支持。
相比PerformanceObserver
,window.performance
在浏览器中兼容性较好,另外Performance Hooks
在 Node.js 中仍然处于 Experimental 阶段。
推荐在浏览器兼容的情况下使用PerformanceObserver
,使用这种观察者模式可以解决主动调用的问题,而且更为优雅。
转载于:https://juejin.im/post/5cb19aece51d456e4037727e
你了解 Performance Timeline Level 2 吗?相关推荐
- 现代浏览器观察者 Observer API 指南
前言 前段时间在研究前端异常监控/埋点平台的实现. 在思考方案时,想到了浏览器自带的观察者以及页面生命周期API . 于是在翻查资料时意外发现,原来现代浏览器支持多达四种不同类型的观察者: Inter ...
- JS:Performance
Performace API Performance 接口可以获取到当前页面中与性能相关的信息.它是 High Resolution Time API 的一部分,同时也融合了 Performance ...
- 前端性能检测Performance
前端性能检测Performance https://developer.mozilla.org/zh-CN/docs/Web/API/Performance Performance 接口可以获取到当前 ...
- 前端性能优化-Performance详解
Performance 接口可以获取到当前页面中与性能相关的信息. 它是 High Resolution Time API 的一部分,同时也融合了 Performance Timeline API.N ...
- 网站监控笔记(一) — Performance
What is website monitoring? 什么是网站监控?其实我们主要是实时监控网站性能,是否存在异常资源.请求.代码出错 .页面加载消耗时长 等 一系列问题!如果出现这些问题,你能不能 ...
- 如何对页面进行简单的性能检测与分析
本文首发于:https://github.com/bigo-frontend/blog/ 欢迎关注.转载. 前言 页面性能的好与坏,直接影响到用户的留存.对于前端开发者来说,不能以感官的体验进行判断, ...
- How Twitter Uses Redis to Scale - 105TB RAM, 39MM QPS, 10,000+ Instances
Yao Yue has worked on Twitter's Cache team since 2010. She recently gave a really great talk:Scaling ...
- 校招社招必备核心前端面试问题与详细解答
本文总结了前端老司机经常问题的一些问题并结合个人总结给出了比较详尽的答案.网易阿里腾讯校招社招必备知识点. 原理讲解参考:前端增长-重新定义大前端 在线课程:网易云课堂课程 思否课堂 官方博 ...
- Web性能API——帮你分析Web前端性能
开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求.其中,网页的性能直接决定了用户的体验,而随着新型客户端浏览设备的出现与网站功能的日益复杂化,对于性能的专注也 ...
最新文章
- 觉得酒驾处罚太严厉?看看国外的再说吧...
- 洛谷 P1176 路径计数2
- linux kernel的问与答
- mfc指示灯报警显示_消防水炮需要外置声光报警吗
- ubuntu一般软件安装在什么目录
- Linux并发与竞争实验(一次只允许一个应用程序操作LED灯)
- wifi android手机版下载地址,手机随身wifi下载-手机随身WiFi 安卓版v1.6.3-PC6安卓网...
- 在Android Studio中将Android工程变为Library使用
- 如何使用SMART原则
- 2003- cant connect to MYSQL server on localhost(10061)
- java使用阿里云发送通知短信
- 【入门】广电行业DNS、DHCP解决方案详解(三)——DNS部署架构及案例
- Kafka部署、原理和使用介绍
- .scss和.css的区别,css - SCSS和Sass有什么区别?
- Android调用相机预览黑屏app passed NULL surface解决
- 状态模式之观察者和状态模式
- 大学生生涯人物访谈(程序员篇)
- 刘知远 | 语义表示学习
- 平台 恒鑫 机器人_压铸取放件机器人系统-恒鑫智能
- 四通oki打印机驱动安装注意的问题