Performance API 是当前最可靠、浏览器原生支持的 JavaScript 执行效率评估方式，精度达微秒级，优于 Date.now() 和 console.time()，适用于单段代码耗时测量、多步骤流程分段追踪及渲染性能关联分析。
直接用 Performance API 是当前最可靠、浏览器原生支持的 JavaScript 执行效率评估方式。它不依赖第三方工具，精度高（微秒级），且不受系统时钟漂移影响，比 Date.now() 或 console.time() 更适合定位真实瓶颈。
用 performance.now() 测单段代码耗时
适合快速验证函数或逻辑块的执行时间，尤其在开发调试阶段：
- 调用
performance.now()获取起始时间戳（单位：毫秒，带小数） - 执行待测代码（如计算、DOM 操作、循环等）
- 再次调用
performance.now()得到结束时间戳，相减即为精确耗时
示例：
function computeSum(n) {
let s = 0;
for (let i = 0; i < n; i++) s += i * i;
return s;
}
<p>const t0 = performance.now();
computeSum(1e6);
const t1 = performance.now();
console.log(<code>computeSum(1e6) 耗时 ${t1 - t0} ms</code>); // 如：12.478 ms用 performance.mark() 和 performance.measure() 分段追踪流程
适用于多步骤、含异步或关键路径较长的业务逻辑，便于结构化归因：
立即学习“Java免费学习笔记（深入）”；
-
performance.mark('start')在入口打标记 - 在关键节点（如数据加载后、渲染前、回调触发时）继续打标记，如
performance.mark('after-fetch') - 用
performance.measure('name', 'start', 'after-fetch')定义区间并命名 - 后续可通过
performance.getEntriesByType('measure')提取所有测量结果，支持批量分析或上报
注意：长期运行页面需定期调用 performance.clearMarks() 和 performance.clearMeasures() 防止内存持续增长。
结合渲染指标看真实用户体验
执行快 ≠ 用户感知快。可同步采集首屏相关渲染指标，建立 JS 执行与视觉反馈的关联：
-
performance.getEntriesByType('navigation')[0]查页面加载总耗时 -
performance.getEntriesByType('paint')获取first-paint（首次绘制）和first-contentful-paint（首内容绘制）时间 - 在关键 JS 任务后插入
requestAnimationFrame(() => performance.mark('render-ready'))，再配合measure对比 JS 完成与画面更新之间的延迟
这样能判断是否因 JS 阻塞了主线程，导致渲染滞后。
避免常见误判陷阱
单纯看一次测量值容易误导，需关注稳定性与上下文：
- 单次测量受 CPU 调度、GC、其他脚本干扰较大，建议多次运行取中位数或 p95 值
- 避免在 DevTools 开着时测性能——其本身会显著拖慢 JS 执行和渲染帧率
- 移动端需额外关注
interactionId或使用Event Timing API（如getEntriesByType('event')）分析用户操作响应延迟 - 若函数执行时间极短（performance.now() 仍可反映趋势，但不宜过度解读绝对值
