http缓存详解（ 直接看图，超易懂🤗 ）

前言

你了解http缓存吗？http请求在什么状态下会返回304状态码？

下面5张图，花了一晚上整理画出来🙈，图画的不太好看，但意思十分明确，不要太嫌弃喔。相信看完后，能让你对http缓存有比较深刻🤔的了解。

Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础且重要的环节，同时对于有追求的前端童鞋来说也是必备的知识技能。

知识铺垫

了解浏览器和服务器间通信时的请求报文及响应报文,HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。

缓存命中规则

我们都知道前端发送请求时，命中缓存会直接返回缓存数据。那么缓存到底从哪里来的？其实我们可以认为浏览器存在这么一个缓存数据库,用于存储缓存信息。

在客户端首次请求数据时，缓存数据库中没有对应的缓存数据，需要请求服务器，服务器返回后，
将数据及缓存规则存储至缓存数据库中。

HTTP缓存有多种规则，根据是否需要重新向服务器发起请求来分类，一般将其分为两大类(强制缓存，对比缓存)

强制缓存如果生效，不需要再和服务器发生交互，而对比缓存不管是否生效，都需要与服务端发生交互。

强制缓存

响应头中一定有cache-control或expires属性。
其http的状态码返回：Status Code: 200 (from disk cache)，说明强制缓存已被命中使用。

Expires为服务端返回的到期时间。即下一次请求时，请求时间小于服务端返回的到期时间，直接使用缓存数据。作为HTTP 1.0的作品，所以它基本可以忽略。

另一个问题是，到期时间是由服务端生成的，但是客户端时间可能跟服务端时间有误差，这就会导致缓存命中的误差。
所以HTTP 1.1 的版本，使用Cache-Control替代。

Cache-Control 是最重要的规则。常见的取值有no-cache、no-store、max-age、private、public、，默认为private。见下表：

在Cache-Control 中，这些值可以自由组合，多个值如果冲突时，也是有优先级的，而no-store优先级最高。如下图：

强制缓存的缓存机制，如下图：

对比缓存

顾名思义，需要进行比较判断是否可以使用缓存。
响应头中一定有etag或last-modified属性。
其http的状态码返回传说中的：Status Code: 304

last-modified：

• 服务器第一次响应请求时，告诉浏览器资源的最后修改时间，并存储到浏览器端。
• 再次请求时，请求头中携带If-Modified-Since字段，将上次请求服务器资源的最后修改时间传到服务器与被请求资源的最后修改时间进行比对。
• 若资源的最后修改时间大于If-Modified-Since的值，说明资源又被改动过，则响应整片资源内容，返回状态码200。
• 若资源的最后修改时间小于或等于If-Modified-Since，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

etag：

• 服务器资源是否被修改的唯一标志。首次请求唯一标志被存到客户端数据库。
• 同理，再次请求时，请求头中携带If-None-Match字段。与被请求资源的唯一标识进行比对
• 若不同，说明资源又被改动过，则响应整片资源内容，返回状态码200；
• 若不同，说明资源没有被改动过，则响应HTTP 304，告知浏览器继续使用所保存的cache。

对比缓存的缓存机制，如下图：

http缓存优先级

强制缓存优先级 高于 对比缓存。 也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。

强制缓存: cache-control (http1.1) > expires(http1.0)、
对比缓存: etag(传送If-None-Match) > last-modified (传送If-Modified-Since)

总结

总的来说，http缓存的概念是比较抽象的。这里提供一个方法，可以让大家能更好的消化、吸收：我们可以通过nodejs框架快速生成接口，在接口中设置不同的缓存机制，通过 budo 、 anywhere 、 http-server 的方式快速生成静态文件服务器，去调用接口，然后在请求后对有无缓存的情况做对比。只要我们真正的动手实践，才能更快更准确的掌握知识点。顺便我们还可以通过服务实践一下http 301 和 302 状态码的区别。

面试过程中你有被问倒过哪些http问题？欢迎在下方留言讨论。如果发现文章中有误的地方欢迎指出。如果觉得有帮助，不妨点赞、关注支持一下，非常感谢！

作者：tager