浏览器缓存

浏览器缓存体系

学习目标：系统性梳理浏览器缓存的完整机制，重点掌握不同缓存策略的应用场景（When）和最佳实践（How），为线上应用的性能优化提供决策支持。

一、核心缓存类型

浏览器缓存主要分为两大类，由 HTTP Header 决定：

• 强缓存：浏览器不向服务器发送请求，直接从本地缓存读取资源。
• 协商缓存：浏览器向服务器发送请求，由服务器决定是否使用本地缓存（返回 304 Not Modified）。

二、缓存的存储位置

缓存不仅存在于 HTTP 层面，还按优先级分布在不同地方：

• Service Worker 缓存
• 内存缓存 (Memory Cache)
• 磁盘缓存 (Disk Cache)
• Push 缓存 (HTTP/2 特性)

三、关键缓存头（Headers）

• Cache-Control：HTTP/1.1 的核心，控制强缓存和协商缓存。
• Expires：HTTP/1.0 的强缓存头，优先级低。
• ETag / If-None-Match：基于资源内容的协商缓存验证。
• Last-Modified / If-Modified-Since：基于最后修改时间的协商缓存验证。

四、实际应用策略（Use Cases）

• 缓存策略 - 不可变资源：如带有 Hash 的 JS/CSS 文件。
• 缓存策略 - 可变资源：如 index.html 或 API 数据。
• 用户行为对缓存的影响：如地址栏回车、F5刷新、Ctrl+F5 强制刷新。

五、关联知识点

• CDN 缓存
• Webpack 与持久化缓存
• HTTP