主题
React 性能优化
React 应用如何优化图片、字体和静态资源加载？
资源优化要围绕真实展示尺寸和关键渲染路径，不能只把所有资源压缩或懒加载。
面试官想考什么
- 首屏图片如何处理？ 考察 LCP 和资源优先级。
- 图片为什么会造成 CLS？ 考察布局稳定。
- 字体如何影响首屏？ 考察阻塞和字体替换。
- 懒加载是否总是更好？ 考察关键路径判断。
一句话回答
text
根据展示尺寸选择图片格式和压缩策略，为图片预留尺寸，控制字体字重和加载时机，首屏关键资源优先，其余资源延迟并配合长期缓存。面试回答详解
1. 图片
使用响应式尺寸和现代格式，避免下载远大于展示尺寸的图片；明确 width/height 或 aspect ratio，防止图片到达后推动布局。首屏主图不能盲目 lazy load。
2. 字体
控制字体文件大小、字重和 subset，合理使用 preload、font-display 和 fallback。字体策略要关注文本可见时间和布局变化，不要为了品牌字体阻塞全部首屏。
3. 静态资源
静态资源使用 hash 和不可变缓存，HTML/入口资源考虑发布时序。第三方脚本、图标和大 JSON 也要纳入资源预算。
4. 验证
用 Network 和 Performance 查看优先级、阻塞链和 LCP element，再用 CLS、LCP、缓存命中率和 RUM 验证。图片清晰度、可访问性和隐私不能被性能目标牺牲。
可直接背诵的 30 秒回答
text
我会先确定真实展示尺寸和 LCP 元素，再选择合适的图片格式、响应式尺寸和加载优先级，并给图片预留尺寸避免 CLS。字体控制字重、subset 和 fallback，非关键资源延迟加载，静态资源用 hash 和长期缓存。最后用 Network、Performance、LCP/CLS 和 RUM 验证，而不是只看压缩后的文件大小。扩展知识
资源优化链路
text
发现关键资源 -> 选择尺寸/格式 -> 设置优先级
-> 预留布局 -> 缓存/CDN -> RUM 验证面试官追问链
追问一：所有图片都用 lazy loading 可以吗？
- 考察点：是否理解关键资源。
- 回答方向：首屏和 LCP 图片通常不应延迟；应按视口、优先级和用户概率选择。
追问二：preload 越多越好吗？
- 考察点：资源竞争意识。
- 回答方向：过多 preload 会抢占关键带宽，只有确定的高优先级资源才应预加载。
追问三：字体导致 CLS 怎么查？
- 考察点：指标定位能力。
- 回答方向：检查字体加载时间、fallback 字体度量、font-display、字重和布局变化时间线。