当前位置: 首页 > article >正文

浏览器的缓存方式几种

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


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 服务器推送

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


http://www.kler.cn/a/539010.html

相关文章:

  • vue学习5
  • Spring Boot接入Deep Seek的API
  • elasticsearch实战三 elasticsearch与mysql数据实时同步
  • pytest.fixture
  • 09vue3实战-----引入element-plus组件库中的图标
  • 【R语言】环境空间
  • 基于Java的在线购物系统的设计与实现
  • 【hive】记一次hiveserver内存溢出排查,线程池未正确关闭导致
  • C++ 中信号转异常机制:在磁盘 I/O 内存映射场景下的应用与解析
  • 49-拓展(1)
  • Docker 部署 verdaccio 搭建 npm 私服
  • Prompt逆向工程:如何“骗“大模型吐露其Prompt?
  • 从零开始人工智能Matlab案例-模拟退火算法
  • 0209作业
  • ollama部署教程
  • Logo语言的测试开发
  • Rust语言的安全开发
  • 硬核技术:小程序能够调用手机的哪些传感器
  • LeetCode热题100- 合并区间【JavaScript讲解】
  • Ubuntu如何开启VNC远程桌面连接
  • Vllm进行Qwen2-vl部署(包含单卡多卡部署及爬虫请求)
  • 解锁国内主流前端与后端框架
  • Java数据结构 | TreeMap 和 TreeSet
  • GPU、CUDA 和 cuDNN 学习研究【笔记】
  • iOS 自动翻滚广告条(榜单条)实现方案
  • CF998A Balloons​ 构造 ​