perf_hooks
# 0.简介
本篇博客快速上手 perf_hooks，示例仓库 (opens new window)
# 1.What is perf_hooks？
perf_hooks 是 Node.js 中的一个模块，它提供了一个性能分析 API，可用于测量和分析 Node.js 应用程序的性能。
使用 perf_hooks 模块，您可以测量事件的执行时间、瞬时堆大小、CPU 使用率等指标，以便找出应用程序的瓶颈并进行优化。
perf_hooks 模块提供了四个主要的性能分析类：PerformanceObserver、PerformanceEntry、PerformanceMark 和 PerformanceMeasure。这些类可用于测量事件的性能，并为性能分析提供数据。
PerformanceObserver 用于监视性能指标并在这些指标发生变化时通知您。PerformanceEntry 包含了对性能测量的详细描述，例如开始时间、结束时间、测量名称等。PerformanceMark 和 PerformanceMeasure 分别表示要测量的事件的开始和结束时间。
通过使用这些类，您可以收集有关应用程序性能的详细信息，并通过分析和解释这些信息来优化应用程序的性能。
# 2.How to use?
当使用 performance 测量函数的执行时间时，可以使用 performance.now() 方法获取当前时间戳。以下是一个测量函数执行时间的示例代码：
const start = performance.now();
// 执行函数
myFunction();
const end = performance.now();
const duration = end - start;
console.log(`myFunction() 执行时间为 ${duration} 毫秒`);
2
3
4
5
6
7
8
9
要测量函数的内存使用情况，可以使用 Node.js 中的 process.memoryUsage() 方法。以下是一个测量函数内存使用情况的示例代码：
const memoryBefore = process.memoryUsage().heapUsed;
// 执行函数
myFunction();
const memoryAfter = process.memoryUsage().heapUsed;
const memoryUsage = memoryAfter - memoryBefore;
console.log(`myFunction() 内存使用量为 ${memoryUsage} 字节`);
2
3
4
5
6
7
8
9
# 3. How to use PerformanceObserver?
# 3.1 measure duration
PerformanceObserver 是 Node.js perf_hooks 模块提供的一个类，用于监视应用程序的性能指标并在这些指标发生变化时通知您。以下是使用 PerformanceObserver 的基本步骤：
创建
PerformanceObserver实例：const { PerformanceObserver, performance } = require('perf_hooks'); const obs = new PerformanceObserver((list, observer) => { // 在这里处理性能指标 console.log(list.getEntries()); });1
2
3
4
5
6使用
observe()方法开始观察指定的性能指标，可以选择从以下列表中的一个或多个指标中进行观察：entryTypes: 数组，包含要观察的性能指标类型，例如 'mark'、'measure'、'navigation'、'resource' 等。buffered: 布尔值，指定是否在observe()调用之前缓存过去的性能指标。
obs.observe({ entryTypes: ['mark', 'measure'], buffered: true });1当
PerformanceObserver检测到与观察的指标类型匹配的性能指标时，触发回调函数。在回调函数中，您可以处理性能指标数据，例如将数据发送到日志或监控系统。const obs = new PerformanceObserver((list, observer) => { console.log(list.getEntries()); // 将数据发送到日志或监控系统等 }); obs.observe({ entryTypes: ['mark', 'measure'], buffered: true });1
2
3
4
5
6当不再需要观察性能指标时，可以调用
disconnect()方法停止PerformanceObserver。obs.disconnect();1使用
PerformanceObserver，您可以监视多个性能指标并收集应用程序的性能数据，以便找出瓶颈并进行优化。
简单示例：如计算 Fibonacci(35) 需要的时间以及耗费的内存
使用 observer ：
const obs = new PerformanceObserver((list, observer) => {
// 在这里处理性能指标, 如将数据发送到日志或监控系统等
list.getEntries().forEach((entry) => {
if (entry.name === "myMeasure") {
console.log(`【TEST2】fib(35) 执行时间为 ${entry.duration} 毫秒`);
}
});
// 清空标记
performance.clearMarks();
});
obs.observe({ entryTypes: ["mark", "measure"], buffered: true });
// 标记开始时间
performance.mark("start");
// 统计耗时版 Fibonacci 函数
let result = fib(35);
// 标记结束时间
performance.mark("end");
/* 使用 measure 去计算时间差 */
// 计算从 "start" 到 "end" 之间的时间
performance.measure("myMeasure", "start", "end");
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
通过 list.getEntries 可根据 entryTypes:[] 数组中指定的内容获取标记节点的一些信息。
list.getEntries()
>(3) [PerformanceMark, PerformanceMeasure, PerformanceMark]
0: PerformanceMark {Symbol(kName): 'start', Symbol(kType): 'mark', Symbol(kStart): , Symbol(kDuration): 0, Symbol(kDetail): null}
1: PerformanceMeasure {Symbol(kName): 'myMeasure', Symbol(kType): 'measure', Symbol(kStart): 1119.0044589042664, Symbol(kDuration): 93.45970821380615, Symbol(kDetail): null}
2: PerformanceMark {Symbol(kName): 'end', Symbol(kType): 'mark', Symbol(kStart): 1212.4641671180725, Symbol(kDuration): 0, Symbol(kDetail): null}
length: 3
2
3
4
5
6
通过获取 PerformanceMeasure 的 duration 的结果为：93.45970821380615
其结果就等于 PermformceMark 标记为end(1212.4641671180725) 与 start(1119.0044589042664) 相减。
# 3.2 measure newWork
将 observer.observe({ entryTypes: ["resource"] }) 设置为 resource 即可。
打开示例文档中的 measure-network.html
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script>
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
console.log("资源下载用时：", entries[0].duration);
});
observer.observe({ entryTypes: ["resource"] });
// 加载一个图片资源
const img = new Image();
img.src =
"https://wjs-tik.oss-cn-shanghai.aliyuncs.com/img/337bde0672199d903ab0a962d9e0ca79.jpg";
document.getElementById("root").appendChild(img)
</script>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
打开控制面板，观察资源下载耗时为 348ms
通过 node 可以更精确获取资源下载用时为 348.7999999523163 ms