一、先给一句总纲（面试开场）
首屏优化的核心目标是 尽快让用户看到并可交互的内容，我一般从 资源加载、代码拆分、渲染策略、网络与缓存 四个层面来做。
二、首屏慢的本质是什么？（一句话点透）
HTML 回来慢
JS 解析执行慢
首屏资源太多
阻塞渲染
三、首屏优化的四大方向（重点）
① 资源加载层（最直接、效果明显）
1️⃣ 减少首屏资源体积
- 图片压缩（WebP）
- 移除无用 JS / CSS
- Tree Shaking
👉 首屏只加载“必须的”
2️⃣ 代码拆分（非常重要）
React 示例：
const Home = React.lazy(() => import('./Home'));
- 路由级拆分
- 组件级拆分
3️⃣ JS / CSS 加载优化
- JS 放
defer - 非关键 CSS 延迟加载
- 第三方脚本延后
② 渲染层（前端重点）
4️⃣ 减少首屏渲染内容
- 首屏只渲染可视区域
- 非首屏内容懒加载
const Chart = lazy(() => import('./Chart'));
5️⃣ Skeleton 骨架屏（体验加分）
- 页面结构先出来
- 数据慢也不白屏
6️⃣ 虚拟列表（首屏 + 滚动）
- 表格 / 列表只渲染可视区域
③ 网络 & 服务端（进阶）
7️⃣ 接口优化
- 合并接口
- 首屏接口优先
- 并行请求
8️⃣ CDN + HTTP2
- 静态资源走 CDN
- HTTP/2 多路复用
9️⃣ 缓存策略
- 强缓存 / 协商缓存
- LocalStorage / IndexedDB
④ 架构层（高级）
🔟 SSR / SSG（大杀器）
- Next.js
- 首屏 HTML 直接可见
1️⃣1️⃣ 预加载 / 预取
<link rel="preload" />
<link rel="prefetch" />
四、你可以举的“真实优化案例”（强烈建议背）
在一个性能查询页面中，首屏需要展示表格和图表，最初首屏时间在 4 秒以上。
后来我们通过 路由拆分、图表组件懒加载、首屏只渲染表格、骨架屏占位，将首屏时间优化到 2 秒以内。
五、面试官追问你也不慌（常见追问）
Q1：怎么衡量首屏？
- FP
- FCP
- LCP
Q2：首屏 JS 很大怎么办？
- 拆包
- 懒加载
- SSR
六、30 秒极速版（背这个）
首屏优化主要从资源体积、代码拆分、渲染策略和缓存四个方向做。通过懒加载、路由拆分、骨架屏、虚拟列表、接口并行和 CDN 缓存，减少首屏阻塞资源，提升首屏可见和可交互时间。
