性能工程面试题

一、进阶题

1. 请解释 FCP、LCP、CLS、INP、TTFB 的含义。进阶

2. 什么是 Core Web Vitals？Google 为什么重视它们？进阶

3. 重排和重绘有什么区别？如何减少重排？进阶

4. 什么是虚拟列表？它的实现原理是什么？进阶

5. 节流和防抖有什么区别？分别适用什么场景？进阶

6. 代码分割是什么？React 中如何实现？进阶

7. preload 和 prefetch 有什么区别？进阶

8. HTTP 缓存中的强缓存和协商缓存有什么区别？进阶

二、高级题

9. 你如何分析一个页面的性能瓶颈？深入

10. Service Worker 如何提升性能？有哪些注意事项？深入

11. 什么是关键渲染路径？如何优化？深入

12. 图片优化有哪些常用手段？深入

13. 如何优化首屏加载时间？深入

14. 什么是长任务（Long Task）？如何优化？深入

15. 你如何制定性能预算（Performance Budget）？深入

三、架构级题

16. 设计一个面向百万级 DAU 的内容平台的性能优化体系。基础

17. 性能优化中，Lab 数据和 RUM 数据有什么区别？应该如何结合使用？基础

18. 你如何处理第三方脚本对性能的影响？基础

19. 在团队中如何推动性能优化落地？基础

20. 描述一次你主导的性能优化项目，效果如何？基础

参考答案（模板）：

背景：某电商首页加载慢，LCP 超过 4s。

优化措施：

1. 图片改用 WebP，按设备尺寸返回不同大小。
2. 首屏 JS 代码分割，从 500KB 降到 150KB。
3. 关键 CSS 内联，非关键 CSS 异步加载。
4. 静态资源上 CDN，开启 Brotli。
5. 接入 RUM 监控。

效果：

• LCP 从 4.2s 降到 1.8s。
• 跳出率下降 15%。
• 转化率提升 8%。

评分维度：

• 有真实项目背景（30%）
• 优化措施具体（40%）
• 有效果数据（30%）

---

21. 现代前端框架（如 React 18）提供了哪些性能优化特性？基础

22. 如何平衡性能优化和开发效率？基础