浏览器的缓存方式几种

简介: 浏览器缓存方式主要包括:1. **强制缓存**,通过 `Expires` 或 `Cache-Control` 控制,缓存有效期内不发起请求;2. **协商缓存**,使用 `ETag` 和 `Last-Modified` 判断资源是否更新;3. **Service Worker 缓存**,适用于 PWA 应用,拦截并返回缓存;4. **浏览器存储**,如 LocalStorage、SessionStorage 和 IndexedDB,用于持久化或会话级数据存储;5. **Push Cache**,仅限 HTTP/2,服务器主动推送资源。选择合适的缓存策略可优化性能和用户体验。

浏览器的缓存方式主要分为以下几种:


1. 强制缓存(强缓存 / Memory Cache & Disk Cache)

  • 通过 ExpiresCache-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 服务器推送

你可以根据需求选择合适的缓存策略!🚀

相关文章
|
3月前
|
缓存 监控 测试技术
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
141 7
|
3月前
|
Web App开发 缓存 UED
如何设置浏览器的缓存策略?
【10月更文挑战第23天】通过合理地设置浏览器的缓存策略,可以在提高网页性能、减少网络流量的同时,确保用户能够获取到最新的内容,从而提升用户体验和网站的性能优化效果。
210 4
|
4月前
|
存储 缓存 JSON
vue2知识点:浏览器本地缓存
vue2知识点:浏览器本地缓存
60 2
|
8月前
|
域名解析 存储 缓存
HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口
【6月更文挑战第23天】 HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口;TCP连接(HTTP/1.1可能需排队);三次握手;发送请求头与体;服务器处理并返回响应;TCP连接可能关闭或保持;浏览器接收并显示响应,更新缓存。HTTP版本间有差异。
129 5
|
9月前
|
缓存 网络协议 前端开发
浏览器访问缓存都发生了什么
浏览器访问缓存都发生了什么
|
9月前
|
缓存
浏览器的缓存策略
浏览器的缓存策略
76 0
|
存储 缓存 算法
如何获取浏览器定位信息存储到浏览器缓存中?
如何获取浏览器定位信息存储到浏览器缓存中
115 0
|
存储 缓存 UED
客户端浏览器的缓存问题排查
客户端浏览器的缓存问题排查
172 0
|
缓存 Android开发 iOS开发
|
Web App开发 缓存 开发者
浏览器缓存机制(二):HTTP缓存
浏览器缓存机制(二):HTTP缓存
387 0