【前端缓存】说一说前端缓存机制

GuoYF 2020-06-15 浏览器前端优化前端缓存

# 前端缓存

浏览器中的缓存作用分为两种情况，一种是需要发送HTTP请求，一种是不需要发送。这两种情况分别为

强缓存是首先被检查的（通过字段进行检查），这个阶段不需要HTTP请求，并且在HTTP/1.0和HTTP/1.1当中，这个字段是不一样的。在HTTP/1.0时期，使用的是Expires，而HTTP/1.1使用的是Cache-Control

Expires: Wed, 15 June 2020 02:05:00 GMT

Expires即过期时间，在服务器返回的响应头中，表示在2020.06.15 02:05之前可以直接从缓存获取数据不用再次请求

因为浏览器的时间和服务器的时间可能不一致，导致过期时间不准确，所以在http/1.1中被废弃

Cache-Control:max-age=3600

Cache-Control通过设置过期时长来控制缓存，字段为max-age（代码表示3600秒缓存过期）

Cache-Control不仅可以控制过期时间，还有很多属性

public: 客户端和代理服务器都可以缓存。因为一个请求可能要经过不同的代理服务器最后才到达目标服务器，那么结果就是不仅仅浏览器可以缓存数据，中间的任何代理节点都可以进行缓存。
private：这种情况就是只有浏览器能缓存了，中间的代理服务器不能缓存。
no-cache: 跳过当前的强缓存，发送HTTP请求，即直接进入协商缓存阶段。
no-store：非常粗暴，不进行任何形式的缓存。
s-maxage：这和max-age长得比较像，但是区别在于s-maxage是针对代理服务器的缓存时间。
must-revalidate: 是缓存就会有过期的时候，加上这个字段一旦缓存过期，就必须回到源服务器验证。

当expires和Cache-Control同时存在的时候，优先使用Cache-Control

当强缓存失效了，就进入协议缓存

浏览器在请求头携带相应的缓存tag来向服务器发送请求，由服务器根据这个tag来决定是否使用缓存。

具体来说，这样的缓存tag分为两种: Last-Modified 和 ETag。

Last-Modified即最后修改时间。在浏览器第一次给服务器发送请求后，服务器会在响应头中加上这个字段。

浏览器接收到后，如果再次请求，会在请求头中携带If-Modified-Since字段，这个字段的值也就是服务器传来的最后修改时间。

服务器拿到请求头中的If-Modified-Since的字段后，其实会和这个服务器中该资源的最后修改时间对比:

ETag 是服务器根据当前文件的内容，给文件生成的唯一标识，只要里面的内容有改动，这个值就会变。服务器通过响应头把这个值给浏览器。

浏览器接收到ETag的值，会在下次请求时，将这个值作为If-None-Match这个字段的内容，并放到请求头中，然后发给服务器。

服务器接收到If-None-Match后，会跟服务器上该资源的ETag进行比对:

在性能方面Last-Midified更好

在进准度方面ETag更好

如果两种方式都支持的话，服务器会优先考虑ETag

（——引用借鉴神三元)