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 的核心组合,适合在大型应用中埋点、收集用户真实场景下的耗时(如“首屏渲染完成”到“按钮可点击”之间的时间)。
立即学习“Java免费学习笔记(深入)”;
-
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 面板交叉验证。











