浏览器缓存机制

一，什么是浏览器缓存机制？

浏览器缓存机制说的就是HTTP缓存机制，其机制是根据HTTP请求报文中的缓存规则确定的。所以要想搞清楚HTTP缓存机制首先要弄清楚缓存机制的缓存规则是什么。

二，什么是浏览器缓存规则？

有经验的前端同学都知道浏览器缓存，浏览器缓存分为强缓存和协商缓存。

1，什么是强缓存？

看下面这张图

该请求中Size为memory cache和disk cache的请求走的都是强缓存路线，什么情况下浏览器会走强缓存路线呢？

浏览器第一次请求时，服务器返回给浏览器的报文中有Cache-Control和Expires两个字段，浏览器就是根据这两个字段来决定是否走强缓存路线的。我们先看一下这两个字段的含义：

1.1，Cache-Control：控制浏览器内容的缓存规则

值有

public：内容在浏览器端和代理服务器都可缓存

private：默认值，内容在浏览器端缓存。

no-cache：使用浏览器缓存，但是需要经过协商缓存验证决定

no-store：所有内容都不缓存，强制缓存和协商缓存都不执行，直接从服务器请求

max-age：缓存有效期，缓存将在多少秒后失效

1.2，Expires：资源失效时间，例如Thu, 30 Jul 2020 05:00:22 GMT，资源将在2020-7-30 05:00:22时间点失效。

1.3，那么Cache-Control和Expires有何区别？

Expires是HTTP/1.0就出现的东西，使用规则就是浏览器拿客户端时间和Expires时间做对比，如果客户端时间小于Expires时间就使用浏览器缓存，由于客户端时间可能由于时区不同的原因，导致浏览器缓存失效。所以在HTTP/1.1中引入了Cache-Control其优先级大于Expires。

 

2，什么是协商缓存？

强缓存失效后，浏览器会携带缓存标识向服务器重新发起http请求，服务器会根据缓存标识来决定浏览器是否继续使用缓存资源。那么服务器是根据哪些缓存标识来判断的呢，有两个分别是：Last-Modified，ETag

浏览器第一次请求时服务器会通过response对象把Last-Modified和ETag返回给客户端，如果强制缓存失效，浏览器会把缓存标识也就是If-Modified-Since和If-None-Match通过request对象带到服务端，服务端通过对比资源在服务端的ETag和Last-Modified来决定浏览器是继续利用缓存文件还是返回新的资源文件。对比思路是：如果服务器接收到Request中If-Modified-Since时间等于Last-Modified，说明资源在服务端未修改，返回304，通知浏览器继续使用浏览器缓存资源，如果If-Modified-Since时间小于Last-Modified，则服务端返回新的资源文件。

Etag是在服务器生成的资源唯一标识，如果服务器接收到的If-None-Match值和Etag不相等说明资源有修改，服务器重新返回资源文件，反之返回304，通知浏览器继续使用浏览器缓存资源。

Etag优先级大于Last-Modified

 

总结：

根据浏览器缓存机制，如果浏览器端根据强制缓存规则判断出资源缓存未失效，则直接使用缓存资源，如果强制缓存资源失效则要走协商缓存，协商缓存有服务端根据协商缓存规则判断是继续使用缓存资源（返回304）还是重新返回服务端资源。

 

 

参考

https://mp.weixin.qq.com/s/ukCKpHvq4McmOEdXsIuf8g