说说 Http 强缓存与协商缓存

[CodeRookie262]

随着技术的不断更新和进步，提升性能随处可见，其中缓存就是性能优化的一种方案，Http 强缓存和协商缓存基本都会用到，借此分析它们给我们带来了哪一些好处，适用于哪一些场景呢？

[CodeRookie262]

缓存的优缺点。

优点：

1. 减少了冗余的数据传输，减低了用户的网络费用；
2. 缓解了网络瓶颈的问题，在网络质量不怎么好的情况下也可以做到更快的资源加载；
3. 降低了对服务器资源的要求，服务器可以更快地响应数据避免过载；
4. 降低了距离带来的时间延迟。

缺点：

1. 可能加载的资源不是最新的；
2. 消耗内存。

关于 Http 的缓存主要分为强缓存和协商缓存

在资源请求中，浏览器每次都会 response headers 是否含有缓存的标志字段，先判断是否走缓存，如果走缓存的话是强缓存还是协商缓存，以及资源如果过期会如何处理等等，下面逐一分析。

强缓存

浏览器发起请求是会判断 response headers 是否命中强缓存，由于 Http 版本不同，判断的字段也会不一样，http 1.0 和 http 1.1 判断是否强缓存的字段分别是 expires 和 cache-control，他们都是用来记录缓存的过期时间的，其中 expires 的时间格式是 Expires: Fri, 05 Feb 2021 00:42:27 GMT 而 cache-control 是 Cache-Control: max-age=2592000。不过与 cache-control 相比 Expires 有一个缺陷，因为它记录的是一个绝对时间，正因为是绝对时间所以在某些情况下，服务器的时区和浏览器时区不一致的时候就会导致缓存失效。还有为了 http 向下兼容处理，往往都会添加 cache-control 和 expires 字段。

强缓存如果还未过期的时候，浏览器不会请求服务器而是直接从缓存中取出来，测试状态码也是和正常请求一样是 200，区别不同的就是在 Network 中的 Size tab 会显示 memory cache 或者 disk cache(表示从内存或者磁盘中获取缓存数据)；

协商缓存

浏览器请求时会判断是否有强缓存且缓存未过期，如果强缓存走不通就看看请求头是否有 协商缓存 的标记字段，同样因为 http 版本的不同，http 1.0 和 http 1.1 的标识字段分别是 Last-Modified , If-Modified-Since 和 ETag , If-None-Match；其中每次请求时都会判断文件是否更新，如果没有更新的话服务端就会响应 304 状态码给客户端通知它取缓存即可，反之返回最新的资源。其中Last-Modified记录的时间粒度是秒，如果文件在 1 秒内修改多次的话就会存在客户端缓存的表示最新的资源导致不能及时更新，而 ETag 记录的是文件修改后根据内容生成一个标识符，只要服务端更改文件时客户端在请求中就不会走协商缓存；

一般如果是内容不变的文件可以采用强缓存，例如媒体资源这些，但是如果内容频繁变化的话可以使用协商缓存，例如页面的主入口文件 index.html。