PerformanceObserver

PerformanceObserver

它主要用于观察性能时间轴(Performance Timeline),并在浏览器记录时通知新的性能条目。它可以用来度量浏览器和 Node.js 应用程序中某些性能指标。在浏览器中,我们可以使用 Window 对象作为 window.PerformanceObserver,在 Node.js 应用程序中需要 perf_hooks 获得性能对象。比如,const {performance} = require('perf_hooks')。它在下列情况下是有用的。

  • 测量请求(Request)和响应(Response)之间的处理时间。(浏览器)

  • 在从数据库中检索数据时计算持续时间。(Node.js 应用程序)

  • 抽象精确的时间信息,使用 Paint Timing API,比如 First Paint 或 First Contentful Paint 时间

  • 使用"User Timing API"、"Navigation Timing API"、"Network Information API"、"Resource Timing API"和"Paint Timing API"访问性能指标

基础使用

创建观察者

可以通过调用它的构造函数和传递处理函数来创建它。

const observer = new PerformanceObserver(logger);

定义要观察的目标对象

observer.observe(...) 方法接受可以观察到的有效的入口类型。这些输入类型可能属于各种性能 API,比如 User tming 或 Navigation Timing API。有效的 entryType 值:

  • "mark": [USER-TIMING]

  • "measure": [USER-TIMING]

  • "navigation": [NAVIGATION-TIMING-2]

  • "resource": [RESOURCE-TIMING]

// subscribe to User-Timing events
const config = { entryTypes: ['mark', 'measure'] };
observer.observe(config);

定义回调函数事件

当应用程序中使用观察到的事件时,会触发回调处理程序。

function getDataFromServer() {
performance.mark('startWork');
// see [USER-TIMING]
doWork(); // Some developer code
performance.mark('endWork');
performance.measure('start to end', 'startWork', 'endWork');
const measure = performance.getEntriesByName('start to end')[0];
}
function logger(list, observer) {
const entries = list.getEntries();
entries.forEach(entry => {
console.log(
'Name: ' +
entry.name +
', Type: ' +
entry.entryType +
', Start: ' +
entry.startTime +
', Duration: ' +
entry.duration +
'\n'
);
});
}