浏览器缓存：强缓存与协商缓存

最新推荐文章于 2022-12-02 17:41:14 发布

星河鹭起cm

最新推荐文章于 2022-12-02 17:41:14 发布

阅读量201

点赞数

文章标签：缓存 javascript 前端 html5

本文链接：https://blog.csdn.net/sinat_39956944/article/details/127350723

版权

浏览器相关

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

首先是检查强缓存，这个阶段不需要发送HTTP请求。
通过相应字段检查，在HTTP/1.0和HTTP/1.1当中，这个字段是不一样的。在早期，也就是HTTP/1.0时期，使用的是Expires，而HTTP/1.1使用的是Cache-Control。

Expires
Expires即过期时间，存在于服务端返回的响应头中，告诉浏览器在这个过期时间之前可以直接从缓存里面获取数据，无需再次请求。
但是服务器的时间和浏览器的时间可能并不一致，那服务器返回的这个过期时间可能就是不准确的。因此这种方式很快在后来的HTTP1.1版本中被抛弃了。
Cache-control
采用过期时长来控制缓存，对应的字段是max-age。
```
Cache-Control:max-age=3600
```
代表这个响应返回后在 3600 秒，也就是一个小时之内可以直接使用缓存。
Cache-control可以组合非常多的指令，完成更多场景的缓存判断, 将一些关键的属性列举如下:
- public: 客户端和代理服务器都可以缓存。因为一个请求可能要经过不同的代理服务器最后才到达目标服务器，那么结果就是不仅仅浏览器可以缓存数据，中间的任何代理节点都可以进行缓存。
- private：这种情况就是只有浏览器能缓存了，中间的代理服务器不能缓存。
- no-cache: 跳过当前的强缓存，发送HTTP请求，即直接进入协商缓存阶段。
- no-store：非常粗暴，不进行任何形式的缓存。
- s-maxage：这和max-age长得比较像，但是区别在于s-maxage是针对代理服务器的缓存时间。
  值得注意的是，当Expires和Cache-Control同时存在的时候，Cache-Control会优先考虑。

强缓存失效之后，浏览器在请求头中携带相应的缓存tag来向服务器发请求，由服务器根据这个tag，来决定是否使用缓存，这就是协商缓存。
缓存tag分为两种: Last-Modified 和 ETag

两者对比

在精准度上，ETag优于Last-Modified。优于 ETag 是按照内容给资源上标识，因此能准确感知资源的变化。而 Last-Modified 就不一样了，它在一些特殊的情况并不能准确感知资源变化，主要有两种情况:

编辑了资源文件，但是文件内容并没有更改，这样也会造成缓存失效。
Last-Modified 能够感知的单位时间是秒，如果文件在 1 秒内改变了多次，那么这时候的 Last-Modified 并没有体现出修改了。

在性能上，Last-Modified优于ETag，也很简单理解，Last-Modified仅仅只是记录一个时间点，而 Etag需要根据文件的具体内容生成哈希值。

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