Performance API 优化需对齐 React 渲染三阶段与浏览器绘制，用 PerformanceObserver 捕获 FCP/LCP 定位用户感知节点，结合 performance.mark/measure 打点归因，分析资源链并用 memo、lazy、useMemo 等 React 机制针对性干预。
直接用 Performance API 优化组件渲染效率，关键不是只看总耗时，而是把 React 渲染的三个核心阶段（Render、Pre-commit、Commit）和浏览器实际绘制行为对齐，再结合资源加载与脚本执行做归因分析。
捕获真实渲染节点，定位“用户看到内容”的时刻
SPA 中首屏常由 JS 动态生成，DOMContentLoaded 或 load 事件无法反映框架真正完成渲染的时间。必须监听浏览器原生绘制信号：
- 用
PerformanceObserver监听paint类型，获取 FCP（首次内容绘制） 和 LCP（最大内容绘制） 时间点，它们代表用户感知的“有内容”和“页面基本可用”两个关键体验节点 - 对路由跳转后的子页面，务必启用
buffered: true，避免页面初始化前已发生的绘制事件丢失 - FCP 通常对应标题、首段文本或首张图标；LCP 多为 Hero 图、主 Banner 或大块容器——这些元素就是你要重点优化的“渲染锚点”
把组件生命周期和 Performance 标记对齐
React 自身不暴露 Render/Pre-commit/Commit 的精确时间戳，但你可以主动打点，让性能数据可归因：
- 在组件
useEffect（Commit 阶段后）或useLayoutEffect（Commit 阶段中、DOM 更新后）里调用performance.mark()，比如performance.mark('MyComponent_commit') - 在函数组件体开头或自定义 Hook 内部调用
performance.mark('MyComponent_render_start')，标记 Render 阶段起始 - 配合
performance.measure()计算区间耗时，例如performance.measure('MyComponent_render', 'MyComponent_render_start', 'MyComponent_commit') - 把这些标记和路由 path、组件 name 一起上报，就能在监控平台按模块、按页面下钻分析
识别并切断阻塞渲染的资源链
LCP 元素常被上游依赖拖慢，仅优化组件逻辑不够，要联动资源加载分析：
- 拿到 LCP 元素后，查它对应的资源：调用
performance.getEntriesByType('resource')，筛选initiatorType === 'img'或'fetch'，匹配其name（如图片 URL 或接口地址） - 重点看该资源的
duration和transferSize：图片未压缩、缺失srcset、接口 TTFB 过高，都会直接拉长 LCP - 若 LCP 是动态插入的 DOM（如 React 渲染后挂载的 canvas），检查是否在
useEffect里同步执行了重计算或未节流的 resize 监听
结合框架特性做针对性干预
知道瓶颈在哪之后，要用 React 机制去解，而不是只改样式或加 loading：
- 对频繁触发的列表项或折叠区域，用
React.memo+useCallback避免子组件无意义重渲染；注意 props 里别传匿名对象或内联函数 - 首屏非关键区块（如底部推荐、侧边栏）用
lazy+Suspense延迟加载，减少初始 Render 阶段工作量 - 对耗时计算（如图表数据聚合、富文本解析），用
useMemo缓存结果，并确保依赖数组准确——依赖漏写会导致缓存失效，写多会引发不必要更新 - 避免在 render 函数中创建新对象、新数组或调用函数，这些都会导致引用变化，破坏
memo效果
