使用 performance.mark() 和 performance.measure() 可精准追踪 React 组件渲染耗时：在 useLayoutEffect 中打起止标记，用 measure 关联并唯一 ID 防冲突；通过 DevTools 或 getEntriesByType/PerformanceObserver 获取数据，建议开发环境采样监控。
在 JavaScript 运行时性能分析中，使用 performance.mark() 和 performance.measure() 可以精准追踪 React（或其他框架）组件的渲染耗时，关键在于在合适时机打点，并结合 DevTools 或自定义逻辑提取数据。
在组件生命周期中插入性能标记
React 18 后推荐使用 useEffect 或 useLayoutEffect 打点，确保标记发生在真实 DOM 渲染前后：
-
开始标记：在
useLayoutEffect的回调开始处调用performance.mark('render-start-${id}')，此时 DOM 尚未更新但 JS 已执行完毕； -
结束标记：在同一个
useLayoutEffect回调末尾或下一个微任务中调用performance.mark('render-end-${id}')； - 避免在
render函数体中打点，因其可能被多次调用且不反映实际渲染阶段。
用 performance.measure() 关联起止标记
标记本身不产生耗时数据，需显式测量：
- 调用
performance.measure('MyComponent-render', 'render-start-abc', 'render-end-abc')创建可读的测量记录； - 该操作会将时间差存入 PerformanceObserver 或
performance.getEntriesByName()中； - 建议为每个组件实例生成唯一 ID（如用
useId()或随机字符串），防止标记名冲突。
捕获并查看测量结果
有两类常用方式获取数据：
立即学习“Java免费学习笔记（深入）”；
-
浏览器 DevTools → Performance 面板：录制页面交互后，在“Timings”轨道下查找你命名的
measure条目，直接看到毫秒级耗时和位置； -
代码中主动读取：用
performance.getEntriesByType('measure')筛选，例如：
const entries = performance.getEntriesByType('measure')
.filter(e => e.name.includes('MyComponent-render'));
配合 PerformanceObserver 实现自动化监控
适合长期集成到项目中做轻量级性能埋点：
- 创建观察器监听
'measure'类型条目：
new PerformanceObserver(list => {
list.getEntries().forEach(entry => {
if (entry.name.endsWith('-render')) console.log(entry.name, entry.duration);
});
}).observe({ entryTypes: ['measure'] }); - 注意控制采样率（如只对开发环境或特定路由启用），避免影响运行时性能；
- 可进一步上报 duration > 50ms 的渲染，辅助识别卡顿组件。
