如何在 HTML 编辑器中通过 performance.now 监控关键渲染路径耗时-html教程-PHP中文网

performance.now()不能监控关键渲染路径全程耗时，因其仅提供时间戳，不感知paint/layout等渲染事件；必须配合performance.mark()、measure()和performanceobserver分三段打点：crp_start（js触发）、crp_ready（渲染准备完成）、first-contentful-paint（首帧绘制），且performanceobserver须在内同步注册以捕获fcp。

如何在 html 编辑器中通过 performance.now 监控关键渲染路径耗时

performance.now() 不能直接监控“关键渲染路径”全程耗时，它只提供高精度时间戳；要覆盖从 JS 触发到首帧绘制的完整链路，必须配合 performance.mark()、performance.measure() 和 PerformanceObserver 分段打点。

为什么不能只靠 `performance.now()` 测关键渲染路径

关键渲染路径（CRP）包含 HTML 解析、样式计算、布局、绘制、合成等多个异步阶段，中间穿插网络加载、JS 执行、样式重排等不可控环节。单纯在 JS 开头和结尾调用 performance.now()，得到的只是“这段 JS 执行了多久”，而非“页面何时真正可被用户看见”。例如：

你调用 document.getElementById('app').innerHTML = data 后立刻记 end，但此时 DOM 更新尚未触发重绘，更没到首帧显示
浏览器可能把渲染任务延迟到下一个空闲帧，或因长任务阻塞而跳过几帧
performance.now() 本身不感知 paint、layout 等事件，无法自动对齐渲染流水线节奏

必须分三段打点：JS 触发 → 渲染准备完成 → 首帧绘制

真实 CRP 监控需要三个锚点，缺一不可：

‎ Gemini Storybook

一款AI图像与设计工具，主要用于Google Gemini推出的AI绘本生成工具，适合需要提升相关任务效率的用户。

下载

起始点：在业务逻辑触发渲染前打标记，比如点击后、数据 ready 后、requestAnimationFrame 回调开头 —— 用 performance.mark('crp_start')
中间点：DOM 更新 + 样式应用完成后，强制触发一次 layout 检查（仅用于打点，非必需渲染），再立即 performance.mark('crp_ready')；注意避免在标记前后读取 offsetHeight 等触发布局的属性，否则会引入额外开销
终点：监听 paint 类型的 PerformanceObserver，过滤出 name === 'first-contentful-paint' 的条目，其 startTime 即为 CRP 实际终点

之后调用 performance.measure('crp_total', 'crp_start', 'first-contentful-paint') 才能得到端到端耗时（注意：measure 名称和 mark 名称需严格匹配，且 first-contentful-paint 是字符串字面量，不是变量）。

`PerformanceObserver` 必须在内同步注册

FCP、LCP 这类指标一旦错过就永远丢失 —— 它们在页面首次绘制时即生成并上报，不会缓存等待 observer 注册。常见错误是把 observer 初始化写在 DOMContentLoaded 或 window.onload 里，结果线上监控永远收不到首屏数据。

正确做法：在最顶部插入内联 <script></script>，不加 defer 或 async
监听类型必须包含 "paint"，且需在 observe 前确保标记已定义（crp_start 可晚于 observer 注册，但 first-contentful-paint 不可）

示例注册代码（必须放 head 里）：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'first-contentful-paint') {
      performance.measure('crp_total', 'crp_start', entry.name);
      // 此时可上报：performance.getEntriesByType('measure').filter(m => m.name === 'crp_total')
    }
  }
});
observer.observe({ entryTypes: ['paint'] });

真正难的不是打点，而是确保每一段标记都落在渲染流水线的关键断点上；多数卡顿问题藏在“JS 更新 DOM”和“浏览器实际绘制”之间的黑盒里，performance.now() 单点测量根本照不见那里。