React 性能优化

React 应用如何建立 Web Vitals 和 RUM 性能体系？

性能治理要把用户感知指标、React 运行时、网络资源和业务结果关联起来，而不是只追 Lighthouse 分数。

适合阶段：高级前端 / 资深前端 / 技术负责人核心能力：Web Vitals · RUM · 性能预算

面试官想考什么

• LCP、INP、CLS 分别反映什么？ 考察指标基础。
• 实验室和 RUM 为什么会不一致？ 考察真实环境意识。
• 如何按版本和设备定位回归？ 考察数据分析。
• 性能指标如何关联业务？ 考察治理闭环。

一句话回答

用 LCP、INP、CLS 等指标描述用户体验，用 RUM 按路由、版本、设备和网络分组，再结合 React Profiler、资源和业务指标形成性能回归闭环。

面试回答详解

1. 核心指标

• LCP：主内容出现的速度，常受 TTFB、关键数据和主图影响。
• INP：用户交互到下一次绘制的响应，常受事件、React 更新、长任务和布局影响。
• CLS：页面视觉稳定性，常受图片尺寸、字体、广告和异步内容影响。

2. RUM 数据模型

metric + route + release + device + network + region + user state

只记录必要上下文，脱敏用户标识，使用分位数而不是只看平均值。实验室数据用于稳定复现，RUM 用于验证真实设备和网络。

3. 性能预算

为关键路由设置 JS 体积、LCP、INP、CLS、长任务和错误率预算，CI 和发布平台分别负责实验室门禁与线上告警。

4. 工程取舍

不能为了指标牺牲可访问性、内容完整性或业务转化。性能数据采集也有网络和隐私成本，应采样和批量上报。

可直接背诵的 30 秒回答

我会用 LCP、INP、CLS 描述用户感知，再补充 TTFB、长任务、JS 体积、React commit 和业务成功率。实验室工具用于复现，RUM 按路由、release、设备、网络和登录态分组，观察 P75/P95 和回归趋势。最终把性能预算、CI 检查、线上告警和回滚动作接入发布流程。

扩展知识

性能闭环

采集 -> 分组 -> 基线 -> 定位 -> 优化 -> 灰度 -> 回归

面试官追问链

追问一：Lighthouse 很高但 INP 很差，可能为什么？

• 考察点：是否理解首屏和交互的差异。
• 回答方向：检查事件处理、React render/commit、长任务、第三方脚本和低端设备，不要只看首屏指标。

追问二：为什么用 P75/P95？

• 考察点：是否理解分布。
• 回答方向：平均值会掩盖慢用户；分位数能反映大多数或尾部用户的真实体验。

追问三：RUM 如何避免影响性能？

• 考察点：观测成本意识。
• 回答方向：延迟加载、采样、批量上报、字段裁剪、sendBeacon 和失败静默。

推荐阅读

• web.dev Core Web Vitals
• web.dev INP
• Chrome User Experience Report
• React 性能优化