如何通过performance.mark精确追踪业务全链路耗时，从逻辑触发到渲染上帧？

本文共计1068个文字，预计阅读时间需要5分钟。

直接输出结论：

为什么 performance.mark('render-end') 不等于“上帧”

performance.mark('render-end') 只记录 JS 调用那一刻的时间戳，但此时 DOM 可能还没更新，更不意味着像素已绘制到屏幕。常见误判场景：

• 在 React 的 useEffect 或 Vue 的 nextTick 回调里打点，只代表虚拟 DOM 已提交，不代表真实 DOM 已插入或样式已计算
• 调用 element.innerHTML = ... 后立刻 mark('dom-ready')，但 layout/paint 尚未触发，getBoundingClientRect() 可能仍返回旧值
• 依赖 DOMContentLoaded 或 load 事件打点，它们和首帧渲染无强关联，尤其在 SSR/SSG 场景下偏差可达数百毫秒

怎么打点才能对齐“上帧”时刻

关键不是“打得多”，而是每个 mark 是否锚定在可验证的渲染就绪信号上。