如何通过HTML的performance.now获取高精度时间戳测量代码执行耗时-html教程-PHP中文网

performance.now() 返回从页面加载开始的高精度毫秒浮点数，精度可达微秒级，不受系统时钟影响；适用于同步代码耗时测量，需起始结束紧贴待测代码，异步操作应分段打点或用 mark/measure。

如何通过html的performance.now获取高精度时间戳测量代码执行耗时

performance.now() 返回的是什么时间值

performance.now() 返回的是一个以毫秒为单位的浮点数，精度通常可达微秒级（如 12345.6789），它从页面加载（navigationStart）开始计时，不是 Unix 时间戳，也不受系统时钟调整影响。这点和 Date.now() 有本质区别——后者是整数毫秒、易受系统时间跳变干扰，且最小单位就是 1ms。

所以测小段代码（比如函数调用、渲染逻辑、算法循环）耗时，performance.now() 是更可靠的选择。

怎么用 performance.now() 测一段同步代码的执行时间

最常见错误是只调一次 performance.now()，或在异步回调里乱套用。正确做法是「起始点紧贴待测代码前，结束点紧贴其后」，中间不插入任何可能被优化掉的空操作。

✅ 正确：

const start = performance.now();
doSomethingExpensive();
const end = performance.now();
console.log(`耗时：${end - start} ms`);

❌ 错误：performance.now() 被赋值给变量但没立刻用，或者中间穿插了 console.log —— 尤其在 DevTools 开着时，console.log 本身开销不可忽略
⚠️ 注意：performance.now() 在 Web Worker 中同样可用，但在某些旧版 WebView（如 Android 4.4 KitKat 内置浏览器）中可能未实现

为什么不能直接用 performance.now() 测异步操作总耗时

因为 performance.now() 是即时采样，不是自动追踪。如果你写成：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

const start = performance.now();
fetch('/api').then(() => {
  console.log(performance.now() - start); // 这个差值包含等待网络+解析+JS 执行全部时间，但无法区分各阶段

——看起来能用，但实际丢失了关键路径信息。

更合理的做法是分段打点：

发起请求前记一次：const t0 = performance.now()
收到响应后（response.clone().json() 前）记 t1 = performance.now()
数据处理完再记 t2
这样你才能知道是网络慢、还是 JSON 解析卡、还是你的 map 循环拖了后腿

如果要完整追踪，建议配合 performance.mark() + performance.measure()，它们专为这种多阶段分析设计。

容易被忽略的兼容性与精度陷阱

虽然现代浏览器基本都支持 performance.now()，但有两个隐蔽问题常被忽视：

在 iframe 中，若主页面与子 frame 的 origin 不同，子 frame 无法访问主 frame 的 performance 对象（会报 SecurityError），但自己的 performance.now() 仍可用
Node.js 环境默认没有 performance.now()，需手动引入 perf_hooks 模块：const { performance } = require('perf_hooks')
某些低功耗设备（如部分 IoT 浏览器）或极端省电模式下，performance.now() 的实际分辨率可能退化到 4ms 或更高，这时多次测量取平均才有意义