浏览器的缓存方式主要分为以下几种:
1. 强制缓存(强缓存 / Memory Cache & Disk Cache)
- 通过
Expires
或Cache-Control
头部控制。 在缓存有效期内,浏览器直接使用缓存,不发起请求。
关键HTTP头:
Expires: Wed, 21 Oct 2025 07:28:00 GMT
(绝对时间,容易受客户端时间影响)Cache-Control: max-age=3600, public
(相对时间,推荐使用)存储位置:
- Memory Cache(内存缓存):用于短时间内频繁访问的资源(如当前页面的 CSS、JS)。
- Disk Cache(磁盘缓存):用于存储较大的资源,关闭页面后仍然有效。
2. 协商缓存(弱缓存 / ETag & Last-Modified)
- 如果强缓存失效,浏览器会发送请求,并通过协商缓存判断资源是否更新。
如果资源未更新,服务器返回 304 Not Modified,浏览器继续使用缓存的资源。
关键HTTP头:
Last-Modified
(资源的最后修改时间) &If-Modified-Since
ETag
(资源的唯一标识符) &If-None-Match
3. Service Worker 缓存
- Service Worker 作为浏览器的代理,拦截请求并返回缓存,适用于 PWA(渐进式Web应用)。
- 可用
Cache API
控制哪些资源缓存、如何更新。
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 服务器推送 |
你可以根据需求选择合适的缓存策略!🚀