Skip to content

浏览器缓存机制

发布日期:2023-12-29

缓存位置

  1. Service Worker 一个独立的线程,行为比较复杂,必须使用 https,通常用于离线 web 应用
  2. Memory Cache 存储在内存,刷新页面时会保留,关闭页面时清除
  3. Disk Cache 存储在硬盘
  4. Push Cache 是 HTTP/2 中的内容,当以上三种缓存都没有命中时,它才会被使用。

强缓存

  1. Expires

缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点,受限于本地时间。是 http/1 的产物。

  1. Cache-Control

是 http/1.1 的产物,优先级高于 Expires,如设置 Cache-Control:max-age=300 则在 5 分钟内再次请求该资源,将会命中强缓存。

除了强缓存的 max-age 之外,它还包含多种不同的缓存策略:

no-cache:客户端缓存内容,是否使用缓存则需要经过协商缓存来验证决定。

协商缓存

  1. Last-Modified 和 If-Modified-Since

Last-Modified 是服务器给客户端的响应头,表示一个资源的最后修改时间。

If-Modified-Since 是客户端的请求头,表示询问服务器资源在指定时间是否有修改,携带的值是服务器之前返回的 Last-Modified

如果资源没有修改,则服务器返回 304,客户端使用缓存。否则服务器返回新的资源和 200。

  1. ETag 和 If-None-Match

ETag 是服务器给客户端的响应头,表示一个资源的唯一标识,是通过算法计算的 hash 值

If-None-Match 是客户端的请求头,表示询问服务器资源是否有改变,携带的值是服务器之前返回的 ETag

如果资源没有修改,则服务器返回 304,客户端使用缓存。否则服务器返回新的资源和 200。

性能上 ETag 较差,但可靠性更高,而且比 Last-Modified 具有更高的优先级。

缓存机制

强制缓存优先于协商缓存进行,若强制缓存(Expires和Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match),协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,返回200,重新返回资源和缓存标识,再存入浏览器缓存中;生效则返回304,继续使用缓存。

如果所有缓存策略都没有设置,那么通常会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间。

深入理解浏览器的缓存机制

Power by vitepress