前端首屏加载与白屏优化
首屏加载是什么？
首屏加载，指用户在浏览器可视区域（Viewport）内看到的所有内容——包括文字、图片、按钮、视频等——完全渲染完毕，并且页面能够正常响应用户操作（如点击、滚动） 的过程。
它不以“第一个像素”为终点，而是以“首屏内容的完整呈现与可交互”为终点。
首屏加载的优化维度
- 网络层精细化调度
- 长 JS 任务拆分（Time Slicing）
- 组件延迟装载（非核心）
- 资源加载优先级
- 数据请求并行化与预取
- 布局稳定性（防 CLS）
基本优化手段
网络层精细化调度
- 预连接：
<link rel="preconnect" href="//api.example.com">提前建立 TCP+TLS 握手 - DNS 预解析：
<link rel="dns-prefetch" href="//cdn.example.com">消除 DNS 查询延迟 - 缓存策略：强缓存（
Cache-Control）+ 协商缓存（ETag），Service Worker 预缓存关键静态资源 - HTTP/2 多路复用或 HTTP/3，减少连接数限制带来的队头阻塞
长 JS 任务拆分（Time Slicing）
将超过 50ms 的 JS 大循环/大递归，拆解为多个小于 50ms 的子任务，分批执行：
// 伪代码示例：拆分长任务
const tasks = [/* 大量数据 */];
const CHUNK_SIZE = 10;
function processChunk(start) {
const end = Math.min(start + CHUNK_SIZE, tasks.length);
for (let i = start; i < end; i++) {
// 处理任务
}
if (end < tasks.length) {
// 让出主线程，不阻塞渲染
requestIdleCallback(() => processChunk(end));
}
}
requestIdleCallback(() => processChunk(0));同时，将埋点上报、日志收集等非关键逻辑放入 requestIdleCallback 中执行，避免抢占主线程。
组件延迟装载（非核心）
- 组件级懒加载：页面内非首屏组件（弹窗、侧边栏、底部推荐、复杂图表）用
defineAsyncComponent（Vue）/React.lazy+Suspense异步加载 - 虚拟滚动（Virtual List）：对于长列表，只渲染视口内的 DOM 节点，视口外用占位高度替代，减少首屏 DOM 节点数量
资源加载优先级
给首屏 LCP 图片加 fetchpriority="high"；<link rel="preload"> 预加载关键字体/图片；非首屏图片加 loading="lazy"。
数据请求并行化与预取
- 并行请求：
Promise.all并行发起所有首屏 API，消除串行瀑布流 - SSR/SSG 数据预取：服务端请求首屏数据，直接注入 HTML 的
<script>标签中（脱水/注水），省去客户端请求的网络往返耗时
布局稳定性（防 CLS）
给所有首屏图片/视频/广告位显式设置宽高属性（width / height），或预留固定尺寸的骨架占位，防止图片加载后撑开容器导致布局偏移。
白屏是什么？
白屏，指用户在浏览器地址栏回车后，屏幕长时间保持浏览器的默认空白底色，没有任何像素变化或内容出现的阶段。
它不关心内容是否完整，只关心“第一个像素何时画出来”。白屏时间过长，用户会直接认为“网页死了”或“网络断了”。
白屏的优化维度
- 网络层极速连接
- 严防长任务阻塞解析
- 组件完全不装载（纯骨架）
- 关键 CSS 内联
- 流式传输（Streaming SSR）
- 极致压缩 HTML
基本优化手段
网络层极速连接
- 预热连接：在 hover 链接时就用
<link rel="preconnect">提前建立连接 - TTFB 优化：使用 CDN 边缘节点缓存静态 HTML，缩短首字节时间
- Service Worker 离线直出：拦截请求，直接返回缓存的 HTML 骨架，实现近乎瞬时加载
严防长任务阻塞解析
白屏阶段不允许任何超过 5ms 的同步 JS 任务。
- 绝对禁止
<head>中的同步 JS，所有非初始化脚本强制defer或async - 必须跑在
<head>里的极简配置代码，需拆解到 5ms 以内
组件完全不装载
白屏阶段不加载任何业务组件。<div id="app"> 内只放纯 CSS 绘制的骨架屏或背景色，不包含任何需要 JS 实例化的组件。Vue/React 初始化时的响应式数据定义也需精简约，防止抢占主线程。
关键 CSS 内联
将首屏视口区域（Above-the-fold）的样式直接内联进 <head> 的 <style> 标签中；非关键 CSS 用 media="print" 或 rel="preload" 异步加载。
流式传输（Streaming SSR）
服务端不等待整个 HTML 生成完毕再返回，而是边生成边分块（Chunked）推送给浏览器。浏览器收到第一块数据（哪怕只有 <head>）就开始渲染，白屏时间趋近于零。
极致压缩 HTML
删除 HTML 注释、多余空格，内联脚本极简化，减少首批传输字节。
特点
- 白屏优化是“抢跑”，目标是在用户耐心耗尽前刷出存在感
- 首屏加载优化是“冲线”，目标是在视觉完整性和交互流畅度上达标
- 两者呈递进关系：白屏是首屏的前提，必须先解决白屏，才有资格谈首屏
应用场景
- 首屏优化为主：内容型网站（新闻、电商、视频），用户对 LCP 高度敏感
- 白屏优化为主：移动端 H5、低端机、弱网环境，用户对 FCP 极度敏感（几秒白屏即跳出）
- 两者兼顾：SSR 应用、B 端后台系统（虽面向内部，但极差体验会降低效率）
额外思考 1：白屏优化和首屏加载优化是同一个问题吗？
不是。 白屏优化是首屏加载优化的“子集”和“第一步”。
| 对比维度 | 白屏优化 | 首屏加载优化 |
|---|---|---|
| 核心目标 | “先亮起来”：出现第一个像素或文字 | “完整可用”：全量内容呈现且交互流畅 |
| 对应指标 | FP（首次绘制）、FCP（首次内容绘制） | LCP（最大内容绘制）、TTI（可交互时间）、CLS（累积布局偏移） |
| 性能红线 | FCP < 1.8 秒 | LCP < 2.5 秒，TTI < 5 秒 |
| 网络层策略 | 快连快取：Preconnect、SW 离线直出，避免多余请求 | 精细调度：Preload 关键资源，Preconnect 第三方源，缓存复用 |
| 长任务策略 | 零容忍：渲染前不允许 >5ms 同步任务 | 切片执行：允许长任务但必须 <50ms 切片拆分 |
| 组件装载策略 | 完全不装：纯 CSS 骨架，不涉及任何 Vue/React 实例化 | 延迟加载：首屏核心组件挂载，非核心组件 lazy 异步加载 |
| 数据依赖 | 零依赖：不看 API 数据 | 强依赖（通常）：需等待数据，用预取/并行缩短等待 |
| 优化难度 | 门槛低、见效快（改 HTML + 加内联样式） | 门槛高、涉及架构（拆包、SSR、后端接口聚合） |
| 执行优先级 | 第一优先级 | 第二优先级 |
总结
白屏优化是“先上柠檬水救急”，首屏加载优化是“主菜完整上桌且刀叉摆好”。两者缺一不可，但必须先救命（白屏），再治病（首屏）。
额外思考 2：在 CSR 和 SSR 架构下，两者的重心有何不同？
| 对比维度 | 纯 CSR（客户端渲染） | SSR / SSG（服务端/静态渲染） |
|---|---|---|
| 白屏优化重心 | 骨架屏注入（#app 内写死 CSS 占位）+ JS 加载加速（压缩、CDN、拆包） | 流式传输（Streaming） + 关键 CSS 内联（防止 FOUC） |
| 首屏加载优化重心 | JS 执行加速（长任务切片、减少响应式代理）+ 数据并行请求 | 注水（Hydration）提速 + 资源加载优先级（内容已存在，卡点在事件绑定） |
| 核心瓶颈 | JS 下载 + 解析 + 执行 | 服务端渲染耗时 + 客户端注水长任务 |
总结
CSR 架构下，白屏和首屏的优化高度依赖“如何让 JS 更快到达并执行”；SSR 架构下，白屏优化依赖“HTML 流式传输”，首屏优化依赖“如何让注水过程不卡死主线程”。优化优先级不变，但具体手段随架构切换。