浏览器缓存体系
浏览器缓存主题地图,组织 BFCache、HTTP 缓存、Memory/Disk Cache 和 Service Worker 相关入口。
#tech / dev / frontend
#type / moc
#status / evergreen
#platform / browser
#tech / network
[!info] related notes
- 上层入口: 前端基础 MOC, HTTP 与前端网络
- 响应头总览: HTTP 响应头
- 总览入口: 浏览器缓存分类与 304 / memory cache / disk cache
- 页面级缓存: BFCache 页面级缓存
- 资源级缓存: 强缓存, 协商缓存, [[http-cache-storage|浏览器内部缓存存储]], Vary 与缓存键, Age、Date 与新鲜度计算, Pragma 遗留兼容
- 可编程缓存: Service Worker 与 Cache API
- CDN 与部署: CDN 边缘缓存, 缓存失效与部署策略
- 渲染相关: 浏览器渲染流程, 关键渲染路径
- DevTools 路线: 缓存不更新排查路线, 缓存调试
浏览器缓存体系
这张地图只负责导航,不重复展开细节。
从这里开始
- 浏览器缓存分类与 304 / memory cache / disk cache - 先分清缓存策略和存储位置
- BFCache 页面级缓存 - 页面级快照恢复
- 强缓存 - 本地副本直接命中
- 协商缓存 - 过期后向服务器确认
- [[http-cache-storage|浏览器内部缓存存储]] - Memory Cache 和 Disk Cache
- Service Worker 与 Cache API - 可编程缓存
分组
页面级
资源级 - HTTP 缓存
- 强缓存 ←→ Pragma 遗留兼容
- 协商缓存
- [[http-cache-storage|浏览器内部缓存存储]]
- Vary 与缓存键
- Age、Date 与新鲜度计算