HTML怎么做Performance计时_HTML Performance API计时测量【收藏】-html教程-PHP中文网

performance.now()是最直接精确的计时方式，毫秒级精度带三位小数，适合测量任意代码段耗时；配合mark()/measure()可实现跨函数、跨异步的标记式计时；timing仅适用于页面生命周期固定阶段，不可用于通用计时。

html怎么做performance计时_html performance api计时测量【收藏】

performance.now() 是最直接、最精确的计时方式，它不依赖系统时间，毫秒级精度带三位小数（如 123456.789），适合测量任意代码段执行耗时。

用 `performance.now()` 测量任意代码块耗时

这是日常调试和性能分析最常用的方法，比 Date.now() 更可靠，尤其在长时间运行或跨页面场景下不会受系统时钟调整影响。

调用 performance.now() 获取起始高精度时间戳，存入变量（如 start）
执行待测逻辑（同步或异步，但注意异步需在回调/then中取结束时间）
再次调用 performance.now() 得到 end，差值即为真实耗时（单位：毫秒，含小数）
避免在循环中频繁打点，否则可能触发 V8 的优化抑制或增加主线程压力

示例：

const start = performance.now();
doHeavyWork(); // 比如大量数组 map 或 DOM 操作
const end = performance.now();
console.log(`耗时：${(end - start).toFixed(3)} ms`);

用 `performance.mark()` 和 `performance.measure()` 做标记式计时

适合跨函数、跨模块、甚至跨异步任务的逻辑段计时，比如“从点击按钮到数据渲染完成”。它把时间点抽象成命名标记，可读性高，也方便后续用工具导出分析。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

必须先调用 performance.mark('xxx') 打标记，名称不能重复（否则覆盖）
performance.measure('label', 'startMark', 'endMark') 生成一个命名测量项，支持跨域 iframe 内标记（需权限）
所有标记和测量都存在内存中，可用 performance.getEntriesByType('mark') 或 'measure' 查看
注意：标记名区分大小写，且不能含空格或特殊字符（推荐用 kebab-case）

示例：

performance.mark('api-start');
fetch('/api/data').then(() => {
  performance.mark('api-end');
  performance.measure('fetch-duration', 'api-start', 'api-end');
});
// 后续可查：performance.getEntriesByName('fetch-duration')

别误用 `performance.timing` 做通用计时

performance.timing 只记录**页面生命周期固定阶段**的时间点（如 DNS 查询、DOM 解析、load 触发），不是通用计时接口。它的字段在现代浏览器中已逐步被 navigation 和 resource 类型条目替代。

所有字段都是只读时间戳，单位毫秒，基准是 navigationStart
Chrome 90+、Firefox 85+ 已将部分字段标记为 deprecated，performance.getEntriesByType('navigation')[0] 是更推荐的替代
如果硬要用（比如兼容老 IE），务必检查字段是否存在（如 timing.loadEventEnd 可能为 0）
不要试图用它测 JS 函数执行时间——它没有粒度，也不反映运行时行为