浏览器的缓存方式主要分为以下几种:
1. 强制缓存(强缓存 / Memory Cache & Disk Cache)
关键HTTP头:
Expires: Wed, 21 Oct 2025 07:28:00 GMT
(绝对时间,容易受客户端时间影响)Cache-Control: max-age=3600, public
(相对时间,推荐使用)
存储位置:
2. 协商缓存(弱缓存 / ETag & Last-Modified)
关键HTTP头:
Last-Modified
(资源的最后修改时间) &If-Modified-Since
ETag
(资源的唯一标识符) &If-None-Match
3. Service Worker 缓存
4. 浏览器存储(LocalStorage / SessionStorage / IndexedDB)
- LocalStorage:持久化存储,关闭页面或浏览器不会丢失数据。
- SessionStorage:会话级存储,页面关闭后数据丢失。
- IndexedDB:适用于存储大量数据,如 JSON 对象。
5. Push Cache(HTTP/2 推送缓存)
- 仅限 HTTP/2 使用,服务器可以主动推送资源到客户端缓存,但 生命周期很短,仅在会话(Session)内有效。
总结
缓存方式 | 是否需要请求 | 过期控制 | 适用场景 |
---|---|---|---|
强缓存 | 否 | Cache-Control / Expires | 资源不变更,减少请求 |
协商缓存 | 是 | ETag / Last-Modified | 资源可能变更 |
Service Worker | 否 | 自定义缓存规则 | PWA、离线缓存 |
浏览器存储 | 否 | 自己控制 | 存储 JSON、用户设置 |
Push Cache | 否 | 仅会话内有效 | HTTP/2 服务器推送 |
你可以根据需求选择合适的缓存策略!🚀