网络与加载优化
本节整理 HTTP 缓存、压缩与 HTTP/2、预解析与预加载、CDN、静态资源压缩、代码分割与路由懒加载、请求策略 等与首屏体验密切相关的内容。
1. HTTP 缓存（强缓存 + 协商缓存）
| 类型 | 行为 | 常用首部 |
|---|---|---|
| 强缓存 | 未过期则不发请求，直接用本地副本 | Cache-Control: max-age=…（优先）、Expires |
| 协商缓存 | 向服务器询问是否仍可用 | ETag / If-None-Match，Last-Modified / If-Modified-Since |
实践组合（SPA 常见）：
- 入口 HTML：宜用
no-cache或较短max-age，保证用户能尽快拿到新入口。 - 带 hash 的 JS/CSS/图片：可配较长
max-age（文件名变更即换 URL，自然失效）。
查询参数 ?v=2 也可强制刷新，但 文件名 hash 仍是主流做法。
2. 传输层：压缩、Keep-Alive、HTTP/2
- Gzip / Brotli：文本类资源显著减小体积（服务端或 CDN 开启）。
- Keep-Alive：TCP 连接复用，减少握手开销。
- HTTP/2：多路复用，缓解 HTTP/1.1 队头阻塞（仍需合理分包，避免单文件过大）。
3. 连接与资源提示：dns-prefetch / preconnect / preload / prefetch
| 手段 | 作用 |
|---|---|
dns-prefetch | 提前 DNS 解析第三方域名 |
preconnect | DNS + TCP + TLS，缩短首连延迟 |
preload | 当前页关键资源优先下载（字体、首屏关键脚本等） |
prefetch | 下一页或后续可能用到的资源，空闲时低优先级拉取 |
原则：preload 只用于真正阻塞渲染的少量资源，滥用会与带宽争抢。
4. CDN
将静态资源放到边缘节点，就近接入，降低 RTT；需注意：
- 缓存键与失效：版本通过文件名或查询串控制。
- HTTPS 与 HTTP/2：多数 CDN 一并支持。
- 动态接口通常不走 CDN 缓存，除非专门设计边缘缓存策略。
5. 代码分割与路由懒加载
- 按需分包：按路由、按组件异步
import()，减小首包 JS。 - 第三方库：大依赖单独 chunk，避免与业务代码捆死在同一入口。
- 路由懒加载：首屏只加载当前路由组件，其余点击后再拉。
构建工具（Webpack / Vite）均支持动态导入；配合分析报告 (rollup-plugin-visualizer 等) 找大包来源。
6. 减少 HTTP 请求次数（辅助）
- 合并过小图标为雪碧图或 SVG Symbol（视维护成本）。
- HTTP/2 下「一味合并成一个巨型 JS」未必最优，更常见是 合理分包 + 缓存友好命名。
小结
加载优化的主线：缓存命中 → 体积变小 → 关键请求更早发起 → 非关键延后。线上务必结合 瀑布图（Network）验证改动是否命中预期。