应使用 Performance.now() 而非 Date.now(),因其基于单调递增高分辨率时间源,精度达1–5微秒、不受系统时钟调整影响,适合精准测量长任务拆分前后耗时。

Performance.now() 是浏览器提供的高精度时间戳 API,返回以毫秒为单位的浮点数(精确到微秒级),适合测量短至几微秒、长至几秒的任务耗时,尤其适合对比长任务拆分前后的执行性能差异。
为什么用 Performance.now() 而不用 Date.now()?
Date.now() 只精确到毫秒,且受系统时钟调整影响;而 Performance.now() 基于单调递增的高分辨率时间源(如 process.hrtime 或硬件计时器),不受系统时间跳变干扰,且精度通常达 1–5 微秒,更适合性能敏感场景。
测量单个长任务拆分前后的耗时
核心思路:在任务开始前和结束后各调用一次 Performance.now(),差值即为实际耗时。注意避免将测量逻辑本身纳入被测范围(如不把 console.log 放在测量区间内)。
- 拆分前测量示例:
const start = performance.now();<br>heavyTask(); // 比如遍历 10 万项并做复杂计算<br>const end = performance.now();<br>console.log(`未拆分耗时: ${(end - start).toFixed(2)} ms`);
DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 拆分后测量(使用 requestIdleCallback 或 setTimeout 拆成小块):
function splitHeavyTask(items, chunkSize = 1000) {<br> let index = 0;<br> const start = performance.now(); // 整体起始时间<br><br> function processChunk() {<br> const startTime = performance.now();<br> for (let i = 0; i < chunkSize && index < items.length; i++) {<br> processItem(items[index++]);<br> }<br> const chunkTime = performance.now() - startTime;<br><br> if (index < items.length) {<br> requestIdleCallback(processChunk, { timeout: 1 });<br> } else {<br> const total = performance.now() - start;<br> console.log(`拆分后总耗时: ${total.toFixed(2)} ms`);<br> console.log(`平均每块耗时: ${(total / Math.ceil(items.length / chunkSize)).toFixed(2)} ms`);<br> }<br> }<br><br> processChunk();<br>}
更严谨:排除渲染与调度开销,只测 JS 执行时间
若想聚焦纯 JS 计算耗时(排除 layout/paint/queue delay 等),建议:
- 在 同步、无 UI 更新、无异步依赖 的上下文中运行被测函数
- 多次运行取中位数,减少 GC 或 JIT 干扰(可用
performance.mark()+performance.measure()配合 DevTools 分析) - 避免在测量期间触发强制同步布局(如读取 offsetHeight 后立即修改 class)
- 使用
performance.clearMarks()和performance.clearMeasures()保持干净环境
配合 Long Tasks API 观察主线程阻塞改善
Performance.now() 测的是代码执行时间,而 Long Tasks API(performance.getEntriesByType('longtask'))反映的是真实主线程被独占 ≥ 50ms 的事件。二者结合更有说服力:
- 拆分前:可能触发多个 longtask 条目,duration 较大
- 拆分后:longtask 数量显著减少或消失,即使总 JS 时间相近,但响应性明显提升
- 可写一个简单函数自动比对:
function logLongTasks(label) {<br> setTimeout(() => {<br> const tasks = performance.getEntriesByType('longtask');<br> console.log(`${label} - Long Tasks: ${tasks.length}, total blocked time: ${<br> tasks.reduce((sum, t) => sum + t.duration, 0)<br> }ms`);<br> }, 0);<br>}<br>// 调用时机:heavyTask() 前后各一次

















