谈谈我理解的Http缓存机制

前几天看到老铁们分享的面经，谈到 http 缓存机制的问题，痛下决心，一口气研究个明白，分享给你们。

前端的发展愈来愈迅速，能作的事情愈来愈多，承担的责任愈来愈重，经过了解 http 缓存机制，能够帮助广大前端开发工做者提升网站的访问效率，也能有效减轻服务器的压力。

http 缓存规则

http缓存机制有两种缓存规则：强缓存 和 对比缓存（也有称为协商缓存）， 这个规则是由服务器响应携带的。

第一次请求

不管强缓存仍是对比缓存，浏览器第一次请求服务器时候，都先要到缓存数据库去请求是否有缓存数据，返回结果固然是没有缓存数据了~ 而后再去请求服务器，服务器的响应数据会携带缓存规则，告诉客户端是强缓存仍是对比缓存。以下图所示：

但是强缓存和对比缓存究竟是什么？如何判断是强缓存仍是对比缓存？

强缓存

强缓存：在一个有效期时间内，请求缓存数据库中的数据。

服务器会经过 cache-control: max-age:xxx (HTTP 1.1) 或者 Expire (HTTP 1.0)  告知浏览器请求数据的有效时间，在这个时间内，浏览器再次请求这个数据的时候就不用请求服务器，而是请求缓存数据库里的数据就行了。如图：

 

这样的好处：

1. 减轻了服务器的压力。一个网站会有大量的用户，海量的请求，服务器要对其处理和响应，这是一个巨大的负担。

2. 浏览器获得数据更快。不用等服务器返回 200 ，直接 304 到缓存数据库中拿数据就行了， 节省了网络传送延迟等时间。

那么 cache-control: max-age:xxx (HTTP 1.1) 或者 Expire (HTTP 1.0) 有什么区别呢？

cache-control: max-age:xxx 是  HTTP 1.1 的内容， Expire 是 HTTP 1.0 的内容， Expire 是服务器产生的到期时限，若是本地的时间存在偏差，那么会形成影响，因此 HTTP 1.1 推出 cache-control 属性。cache-control: max-age:xxx 意为 缓存的内容将在 xxx 秒后失效。

　　注意：

　　cache-control 的优先级比 Expire 高。

强缓存固然也存在问题，在这个期限时间内都用缓存数据了，那我服务器更新数据怎么办？下面介绍一下对比缓存。

对比缓存

对比缓存须要进行比较判断是否能够使用缓存。经过 cache-control：no-cache 使用对比缓存来验证缓存数据。

第一次请求数据的时候，服务器会将缓存标识与数据一块儿返回给客户端，客户端将两者备份至缓存数据库中。再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，判断成功后，返回304状态码，通知客户端比较成功，能够使用缓存数据。

对比缓存判断是否命中经过两对属性：

1. Last-Modified  /  If-Modified-Since

Last-Modified 由服务器产生，指数据的最后修改时间，服务器将 Last-Modified 返回给客户端，下一次浏览器再次请求会携带这个最后修改时间，放在  If-Modified-Since 里，服务器拿到  If-Modified-Since 后，对比数据的最后修改时间：

比对成功，表明数据未修改过，返回状态码 304， 重定向到缓存数据库。

对比失败，表明数据距离上一次被请求时， 作过修改，就要从新响应数据， 返回 200。

2. Etag  /  If-None-Match

Etag  是由服务器产生的一个惟一标识，服务器将 Etag  返回给客户端，下一次浏览器再次请求会携带这个标识，放在   If-None-Match 里，服务器拿到  If-None-Match 后，对比本身的数据标识：

比对成功，表明数据未修改过，返回状态码 304， 重定向到缓存数据库。

对比失败，表明数据距离上一次被请求时， 作过修改，就要从新响应数据， 返回 200。

 　　注意：

　　 Etag  /  If-None-Match 优先级高于 Last-Modified  /  If-Modified-Since

总结：

随着前端技术的进步，前端可以作的事情愈来愈多，了解 http 内容好处良多，至少跟后台开发推锅不至于被牵着鼻子走，哈哈~~~

　　纯属我的看法，若有异议，欢迎提出，转载请指明出处，素质分享。