如何测量javascript代码性能_有哪些工具和方法【教程】
JavaScript性能需用数据验证，首选performance.now()高精度测量、console.time()快速调试、performance.mark()/measure()埋点分析，配合DevTools深入定位真实瓶颈。
JavaScript 代码性能不能靠感觉判断，必须用真实数据说话；console.time() 和 performance.now() 是最轻量、最可控的起点，其他工具只是在此基础上做封装或补充。
用 performance.now() 做高精度单次测量
它返回以毫秒为单位的浮点数，精度远高于 Date.now()（通常精确到微秒级），且不受系统时间调整影响。适合测小段逻辑、循环内耗时、异步回调延迟等场景。
- 必须成对使用：
const start = performance.now();→ 执行目标代码 →const end = performance.now(); console.log(end - start); - 避免在函数外直接写
performance.now()测量，因为 JS 引擎可能优化掉空操作；建议包裹在立即执行函数或重复调用中 - 注意：在 iframe 或跨域 context 中，
performance可能受限（如某些 CSP 策略下timing属性为空）
用 console.time() 快速验证多个片段对比
适合开发调试阶段快速比对两段逻辑（比如不同数组遍历方式），但精度较低（通常只到毫秒），且输出依赖浏览器控制台实现，不可用于自动化或 CI。
- 标签名必须字符串且唯一：
console.time('map-vs-for');和console.timeEnd('map-vs-for');需严格匹配 - 不支持嵌套计时（Chrome 120+ 开始部分支持，但行为不稳定；Firefox 完全不支持）
- 在 Node.js 中需启用
--enable-source-maps才能显示准确行号，否则只显示console.js
用 performance.mark() + performance.measure() 做可复用的性能标记
这是 Web Performance API 的核心组合，适合在大型应用中埋点、收集用户真实场景下的耗时（如“首屏渲染完成”到“按钮可点击”之间的时间）。
-
performance.mark('start-load')和performance.mark('end-parse')是无开销的标记；真正计算发生在performance.measure('parse-time', 'start-load', 'end-parse') - 标记名区分大小写，且不能含空格或特殊字符（否则抛
SyntaxError） - 结果可通过
performance.getEntriesByType('measure')获取，便于导出或上报；但注意该 API 在 Safari 中对duration字段精度有舍入（如 0.123ms 显示为 0.12ms）
浏览器 DevTools 的 Performance 面板不是“一键答案”
它能捕获完整的主线程活动（JS 执行、渲染、GC、网络），但默认录制会过滤掉短于 1ms 的任务，且采样间隔受 CPU 负载影响——你看到的“某函数耗时 8ms”，可能是 5 次调用累计，也可能是单次长任务被拆分。
- 录制前务必勾选
Enable advanced paint instrumentation（尤其测动画帧） - 不要只看 Summary 视图的总时间，要展开 Main 轨道，按
Self Time排序找真正瓶颈（比如Array.prototype.sort占比高，但实际是传入的比较函数里做了 DOM 查询） - 在低配设备上录制时，禁用
WebAssembly解析选项，否则会因解析 wasm 字节码而严重拖慢录制速度
真正的性能瓶颈往往藏
performance.getEntries() 和 DevTools 的 Rendering 面板交叉验证。
