首屏优化怎么做？

.0一、先给一句总纲（面试开场）

首屏优化的核心目标是尽快让用户看到并可交互的内容，我一般从资源加载、代码拆分、渲染策略、网络与缓存四个层面来做。

二、首屏慢的本质是什么？（一句话点透）

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 缓存，减少首屏阻塞资源，提升首屏可见和可交互时间。

七、一句话终极总结

首屏优化的本质是：让“用户看到的东西”优先加载，让“看不到的东西”晚点加载。