前端性能优化是一个常见的面试话题。本文提供了一个系统的回答框架，分为六个主要策略。
1. 资源大小（减少大小）
压缩方法：
- 使用打包工具压缩 JS、CSS 等文件
- 对图片进行压缩或使用支持参数的图片服务
- 服务器启用 GZIP 或 Brotli 压缩
引入层面优化：
- 通过 webpack bundle analyzer 分析依赖
- 用轻量级库替换重型库（如 dayjs 替代 moment）
- 对 CommonJS 库使用 babel-plugin-import 避免整体引入
分割策略：
- 拆分 webpack chunk（便于缓存管理）
2. 资源速度（加快返回）
- 使用 dns-prefetch 提前获取 IP 地址
- 部署资源到 CDN
- 采用 HTTP/2 进行并行请求；考虑 HTTP/3
- 实施资源缓存策略
3. 提前加载
- 使用 prefetch 预加载关键资源
- 采用 APP 离线包方案
- 进行预请求
- 实施 SSR（服务端渲染 HTML 和获取数据）
4. 懒加载
- 图片懒加载
- 组件懒加载
5. 渲染性能
- 通过 Chrome DevTools 中的 CSS Overview 检测 CSS 使用情况
- 用 performance 工具分析渲染瓶颈
- 使用 Vue 或 React DevTools 分析框架重渲染
6. 其他优化
- 性能监控
- 骨架屏实现
- 通过 BFF 合并 API，减少请求数量