http缓存机制及原理浅述

HTTP 缓存，对于前端的性能优化方面来讲，是非常关键的，从缓存中读取数据和直接向服务器请求数据，完全就是一个在天上，一个在地下。

我们最熟悉的是 HTTP 服务器响应返回状态码 304，304 代表表示告诉浏览器，本地有缓存数据，可直接从本地获取，无需从服务器获取浪费时间。

至于为什么被缓存，如何命中缓存以及缓存什么时候生效的，我们却很少在实际开发中去了解。今天小鹿借助动画形式来从根上理解 HTTP 缓存机制及原理。

为什么会有缓存？

单纯的从计算机角度去说，比较抽象，咱们看一个实际的例子。比如，我们通常喜欢把没看完的书放在书架上，而看完以及没有看的书放在箱子中保存。

如果我们把所有的书保存在箱子中，每次看书都要去箱子中找，所以非常麻烦和耗时(这里的箱子，可以想象成服务器)。

当我们开始看新书时，第一次从箱子中取出，看了一半，然后我们直接放到书架上，当下次再看书的时候，直接从书架中取出，这里的书架，就是我们下边要讲到的缓存（一个缓存仓库）。

缓存的“龟”则

当浏览器发出请求到数据请求回来的过程，就像是上述中的取书过程。

浏览器在加载资源时，根据请求头的Expires 和 Cache-control 判断是否命中强缓存，是则直接从缓存读取资源，不会发请求到服务器。

如果没有命中强缓存，浏览器一定会发送一个请求到服务器，通过 Last-Modified 和 Etag 验证资源是否命中协商缓存，如果命中，服务器会将这个请求返回，但是不会返回这个资源的数据，依然是从缓存中读取资源。

如果前面两者都没有命中，直接从服务器加载资源。

动画演示

HTTP 缓存分类