如何利用Performance API精确分析J*aScript代码的执行性能？

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何利用Performance API精确分析J*aScript代码的执行性能？

2025-10-08

浏览次数：次

返回列表

Performance API 提供高精度时间测量，优于 Date.now()，可用于精准分析代码执行性能。使用 performance.now() 可测量小段代码耗时；通过 performance.mark() 和 performance.measure() 标记并计算时间间隔，结合 getEntriesByType('measure') 查看结果；还可监控渲染性能，获取 'first-paint' 和 'first-contentful-paint' 等关键指标；长时间运行应用需调用 performance.clearMarks() 和 performance.clearMeasures() 清理记录，避免内存堆积。合理使用可定位性能瓶颈，优化响应速度。

如何利用performance api精确分析javascript代码的执行性能？

要精确分析J*aScript代码的执行性能，Performance API 是浏览器提供的强大工具集。它能提供高精度的时间戳，帮助开发者测量代码运行时长、识别性能瓶颈。相比 Date.now()，Performance API 的时间精度更高（可达纳秒级），且不受系统时钟偏移影响。

使用 performance.now() 获取高精度时间

performance.now() 返回从页面加载到当前调用时刻的毫秒数，精度远高于传统方法。适合测量小段代码的执行时间。

示例：

let start = performance.now();
// 执行某段逻辑
for (let i = 0; i // 模拟耗时操作
}
let end = performance.now();
console.log(`耗时: ${end - start} 毫秒`);

利用 performance.mark() 和 performance.measure() 管理时间标记

对于复杂流程，可以使用标记（mark）和测量（measure）来组织性能数据。

performance.mark('label')：在某个时间点打上标记
performance.measure('name', 'startMark', 'endMark')：计算两个标记之间的时间差

示例：

performance.mark('start');
// 执行操作
someHe*yFunction();
performance.mark('after-he*y');
// 记录异步任务开始
setTimeout(() => {
  performance.mark('end');
  performance.measure('总耗时', 'start', 'end');
  performance.measure('核心函数耗时', 'start', 'after-he*y');
  // 查看结果
  const measures = performance.getEntriesByType('measure');
  measures.forEach(m => console.log(m.name, m.duration));
}, 0);