跳到主要内容

性能优化与缓存

前端性能 = 首屏速度 + 交互响应 + 资源效率。这一模块从运维视角出发:缓存策略、CDN 配置、资源加载优化。

文档清单

文档解决的问题
HTTP 缓存体系(强缓存/协商缓存)Cache-Control、ETag、缓存决策树
CDN 缓存策略与刷新s-maxage、purge、预热、回源
Service Worker 与离线缓存缓存策略、更新机制、workbox
静态资源哈希与长期缓存content hash、immutable、发版策略
构建产物分析与 Tree Shakingbundle analyzer、代码拆分
图片优化与自适应策略WebP/AVIF、responsive、lazy load
首屏性能优化全链路DNS→TCP→TLS→TTFB→FCP→LCP 全链路

缓存决策速查

资源有 hash 文件名?
→ 是 → Cache-Control: public, max-age=31536000, immutable
→ 否 → HTML?
→ 是 → Cache-Control: no-cache(协商缓存)
→ 否 → Cache-Control: public, max-age=3600