一、浏览器缓存

在日常开发中有时候会遇到一个问题，就是我的代码明明已经推到服务器上部署好了，刷新界面，还是旧的，有时再刷新一下就是新的页面了，但是有时刷新很多次也还是旧的界面，这里我们可能会想到去抓包，查看是否返回了 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

前者优先级高于后者

参考文献:

浏览器的缓存机制

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