一、浏览器缓存

在日常开发中有时候会遇到一个问题,就是我的代码明明已经推到服务器上部署好了,刷新界面,还是旧的,有时再刷新一下就是新的页面了,但是有时刷新很多次也还是旧的界面,这里我们可能会想到去抓包,查看是否返回了 304, 是的话,我们再试试 ctrl+f5。

这里界面没更新,我们做的两件事情的依据就是浏览器的缓存机制。第一次刷新界面,可能命中了浏览器的强缓存,资源文件还是拿的本地的缓存,根本没有去请求浏览器资源。所以我们 f5 刷新一下,企图跳过强缓存。跳过强缓存有时候界面还是旧的,可能命中了协商缓存,返回 304,那我们就试试用 ctrl+f5 跳过他,直接拿服务器上的资源。

从以上例子可知,浏览器缓存策略分为:强缓存和协商缓存,强缓存优先级高于协商缓存。那么浏览器什么时候会缓存服务器返回的资源呢?当我们从地址栏跳到一个 url 时,浏览器会缓存请求返回的数据和缓存相关标识,下次请求时会根据对应的规则采用对应的策略拿数据。

二、强缓存

1. 规则

(1) 查找浏览器是否存在对应的缓存结果和缓存标志

(2) 若存在对应的缓存结果和缓存标志,则查看缓存是否失效

(3) 若缓存失效,则使用协商缓存,否则直接返回缓存资源

(4) 若不存在对应的缓存结果和缓存标志,则直接向服务器发起请求

2. 标识

  • Expires(http/1.0)

  • Cache-Control(http/1.1)

Cache-Control 优先级高于 Expires

三、协商缓存

1. 规则

强缓存失效,浏览器向服务器发起请求,同时带上协商缓存相关标识,浏览器比对Etag/If-None-Match或Last-Modified/If-Modified-Since,比对成功,返回 304 ,使用本地缓存资源,否则返回新的资源

2. 协商缓存标识

  • Etag/If-None-Match

  • Last-Modified/If-Modified-Since

前者优先级高于后者

参考文献:

浏览器的缓存机制

彻底理解浏览器的缓存机制