浏览器强缓存和协商缓存

强缓存是什么?

强缓存是利用 http 的返回头中的 Expires 或者 Cache-Control 两个字段来控制的,用来表示资源的缓存时间

Expires

  • 缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点。也就是说,Expires=max-age+请求时间,需要和 Last modified 结合使用。但它的优先级比Cache-Control 低。
    Expires 是Web服务器响应消息的头字段,在响应的HTTP请求时告诉浏览器在过期时间前,浏览器可以直接从浏览器缓存取数据,而无需再次请求

Cache-Control

  • Cache-Control 是一个相对时间,例如 Cache-Control:3600,代表着资源的有效期是 3600秒。由于是相对时间,并且都是与客户端时间比较,所以服务器与客户端时间偏差也不会导致问题。

Cache-Control 与Expires 可以在服务端配置同时启用或者启用任意一个,同时启用的时候Cache-Control优先级高。

  • 浏览器的缓存主要是为了提高访问效率,强制缓存,第一次访问一个网站的时候,里面的静态资源如图片、CSS、JS 、icon这些资源实际上是从服务器上下载的,刷新网页这个资源是没有必要在服务器上重新去请求的,像这样的资源,浏览器会默认是一些强制缓存,强制缓存当用户第二次访问的时候,它不会再服务器上重新下载资源了,同样返回200状态码,但这个资源会从浏览器的本地缓存里面去取,这种第二次取的缓存的状态就是一种强制缓存。

协商缓存是什么?

HTTP请求的状态码为 304

  • 和后台去协商资源,要不要对它进行缓存;
  • 如果是第一次请求,返回状态码200,在响应头中返回cache-Control,用来控制缓存使用的时间 / 方式(私有缓存和共享缓存),还会返回一个唯一标识 etag(可以理解为内容资源的一个hash或者一个唯一的标识)
  • 在第二次发起请求时,先查看 max-age, 如果过期了,在请求头设置 If-None-Match 等于刚刚 Etag的值,去后台对比,如果 etag 值相同,(或者对比Last Modified的一个时间)证明后端没更新,所以返回 304状态,浏览器接收到304状态之后,判断这个资源无变化,只需从本地把缓存的资源继续使用(也是协商缓存)。
相关推荐
光影少年18 小时前
react离线缓存、图片缓存方案
开发语言·前端·javascript·react native·react.js·缓存·前端框架
m0_380743871 天前
给大模型调用加一层本地缓存,让重复请求直接命中磁盘
缓存
FakeOccupational1 天前
【电路笔记 STM32】Cortex-M7 内核上的数据缓存(D-Cache)结构+MPU+DMA&Cache+STM32CubeMX配置
笔记·stm32·缓存
l1t1 天前
DeepSeek总结的在 pg_stat_statements 中诊断高基数工作负载
数据库·缓存·postgresql
2401_894915532 天前
新手落地 Geo 优化:源码下载、依赖安装、数据库初始化完整步骤
运维·服务器·数据库·人工智能·缓存·开源
2401_894915532 天前
Geo 优化源码部署避坑指南:解决访问异常、定位失效、收录卡顿问题
java·服务器·后端·缓存·开源
祈禾2 天前
Redis三大缓存问题与分布式锁
运维·数据库·redis·笔记·分布式·缓存
祈禾2 天前
Redis三大特殊数据类型
运维·服务器·数据库·redis·笔记·缓存
孙启超2 天前
【AI应用开发】什么是混合检索(Hybrid Search)?向量检索 + BM25 关键词检索,适用场景与 RRF 融合原理
人工智能·缓存·llm·向量数据库·bm25·向量化·ai应用开发
y = xⁿ2 天前
一文掌握Redis常见八股
数据库·redis·缓存