浏览器缓存以及实战

1. 前言

想必各位年轻人，一定都遇到过浏览器缓存的问题，浏览器缓存一般都是作为浏览器优化方式存在，减少资源的请求以及加快网站加载速度。但是如何去设置呢？

2. 浏览器缓存

想了解这个问题，就必须要知道浏览器的缓存原理，各位年轻人可以参考这篇文章--浏览器缓存看这一篇就够了 - 知乎 (zhihu.com)。看完这篇文章，我们主要需要清楚两个概念强缓存和协商缓存。

2.1 强缓存

强缓存就比较通俗易懂了,反正如果response中存在Cache-control:max-age:xxxxx或者Expires,我就开启强缓存，只要在限定的时间内，我就访问内存或者磁盘中的缓存，可以看个简单的例子：

这个是vite的强缓存，然后我们看看它的response:

可以看到，它设置了Cache-Control:max-age:xxxxx,当然它还更加严格的加了个immutable,保证不过期，不请求，immutable的特性可以看--Cache-Control - HTTP | MDN (mozilla.org)。

2.1 协商缓存

当然强缓存还是具有一定的问题的，例如我重新发布了，但是你一定得到期才会重新请求，所以这时候就得使用协商缓存，当然协商缓存一般由Etag和Last-Modified两个头一起控制，可以看个例子:

Etag就是文件的一个标识，可以用hash来实现，由浏览器发送If-None-Match:之前返回的Etag，来让服务端进行验证。当然还有另一个控制头----Last-Modified,这个含义是文件的最后修改时间，由浏览器发送If-Modified-Since 来进行验证,看个例子:

3. 实战

3.1 设置强缓存

当然，浏览器是默认开启缓存的。所以，我们可以在服务端做一些细致的配置，这里我们使用chrome + 微软省钱宝IIS，首先打开网站的控制面板,并选择HTTP 响应头：

并设置之后一天过期：

添加完成之后，打开浏览器，并打开devtools，并将禁用缓存勾掉：

这时可以看到，响应头添加了Cache-Control:max-age=86400 说明设置成功。当然我们也可以验证一下，设置的准不准确，实际上max-age设置的是s,所以只要将86400换算成小时:

可以看到，确实是24小时。

当然也可以设置Expires:

可以查看响应头: 当然Cache-Contol的优先级比Expires高。

3.2 设置协商缓存

设置协商缓存，可以使用IIS如下设置:

此时要选择立即，这个表明response会返回Cache-Control:no-cache,从而使得每次请求都会请求服务器:

所以可以看到304，即每次请求都由服务器验证。