Web 首屏加载优化
首屏加载优化的核心思路，以及首屏资源、初始化逻辑和按需加载之间的关系。
#tech / dev / frontend
#type / concept
#status / growing
[!info] related notes
Web 首屏加载优化
首屏优化关注的是：用户第一次进入页面时，关键内容什么时候可见、什么时候可交互。
一句话定义
首屏优化的目标不是单纯让包变小，而是尽量减少首屏必须下载、执行和渲染的关键工作量。
最常见的优化方向
减少首屏资源体积
- 代码分割
- 路由按需加载
- 图片和字体优化
- 压缩与缓存
减少首屏同步执行逻辑
- 把非关键初始化延后
- 避免在入口同步拉入大量业务模块
- 拆分首屏必须逻辑和非首屏逻辑
优先保障关键渲染路径
- 保证关键 CSS 和关键内容优先到达
- 非关键脚本延后执行
- 减少阻塞渲染的资源
一个非常常见的问题
即使页面组件已经写成路由懒加载，如果入口仍然同步引入一大批初始化代码，那么这些业务模块还是可能提前进入首屏 chunk。
也就是说：
- 懒加载组件不等于所有依赖都会自动懒加载
- 首屏是否变轻，取决于依赖链和初始化时机
常见误区
- 只看 chunk 数量，不看哪些代码其实被提前执行了
- 把所有问题都归因于“请求多”，忽略同步初始化和主线程阻塞
- 只追求打包结果好看，没有结合真实首屏体验指标
最短记忆方式
首屏优化就是把“首次进入必须做的事”尽量减到最少。
面试要点
来自 first-screen-optimization-interview-question 的面试视角整理。
一句话回答
首屏优化通常从减少首屏资源体积、减少同步初始化逻辑、优化关键渲染路径和合理利用缓存几个方向同时入手。
最稳的回答主线
- 资源层：拆包、压缩、缓存、图片优化
- 执行层：延后非关键初始化和非首屏逻辑
- 渲染层：减少阻塞、保证关键内容优先渲染
- 工程层：路由按需加载、分析依赖链、识别真正进入首屏的代码
最短记忆方式
把首屏必须下载、执行、渲染的东西尽量减到最少。