HTTP协议的缓存策略有哪些？

Posted 2022-12-02 杨 戬

文章目录

• HTTP缓存策略
• • 缓存相关概念
  • • 什么是缓存？
    • 什么是浏览器缓存？
    • 那么我们的浏览器为什么需要缓存？
    • 那浏览器具体缓存的是什么？
  • 缓存策略概念
  • • 强制缓存
    • 协商缓存
  • 缓存协商流程图
  • 刷新缓存
  • • 正常请求操作
    • 手动刷新
    • 强制刷新

HTTP缓存策略

缓存相关概念

什么是缓存？

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。

使用缓存是前端性能优化的重要方式，既可以提高响应的速度又可以减少不必要的重复请求，从而提高服务器的吞吐量。但是有时候缓存并不适用于所有情况，有时候反而会使用户体验变差，因此需要根据不同的请求制定不同的缓存策略。

什么是浏览器缓存？

浏览器缓存就是浏览器把一个已经请求过的Web资源拷贝一份副本储存在本地磁盘中。当再次访问相同的URL时，浏览器会根据缓存机制决定是直接使用副本响应访问请求，还是向服务器再次发送请求。

那么我们的浏览器为什么需要缓存？

我们先假设如果没有缓存的话，每一次网络请求都要加载大量的图片和资源，这会使页面的加载变慢许多。

那浏览器缓存的目的其实就是为了尽量减少网络请求的体积和数量，让页面加载的更快。

那浏览器具体缓存的是什么？

当然我们不可能缓存整个网页，网页现在大多是动态的，我们缓存的是那些静态资源（包括 js、css、img）

不能被缓存的：

• 网站的 html 是不能被缓存的。因为网站在使用过程中 html 随时有可能被更新，随时有可能被替换模板
• 网页的业务数据也是不能被缓存的。比如留言板和评论区，用户随时都可以在底下评论，那数据库的内容就会被频繁被更新。

缓存策略概念

​ HTTP协议的缓存策略有两种，分别是强制缓存和协商缓存.

注意：强制缓存的优先级大于协商缓存

强制缓存

强制缓存是服务器告诉浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行协商缓存策略。

一句话：强制缓存就是文件直接从本地缓存中获取，不需要再发送请求获取资源。

强制缓存流程图如下所示：

从上图可以看到，当初次请求时，浏览器会向服务器发起请求，服务器接收到浏览器的请求后，返回资源并返回一个 Cache-Control 给客户端，该 Cache-Control 一般设置缓存的最大过期时间。

此时浏览器已经接收到 cache-control 的值，那么这个时候浏览器再次发送请求时，它会先检查它的 cache-control 是否过期，如果没有过期则直接从本地缓存中拉取资源，返回到客户端，而无需再经过服务器。

强制缓存有过期时间，那么就意味着总有一天缓存会失效。那么假设某一天，客户端的 cache-control 失效了，那么它就没办法从本地缓存中拉取资源。

于是它会重新向服务器发起请求，之后服务器会再次返回资源和 cache-control 的值。

协商缓存

协商缓存是一种服务端的缓存策略，即通过服务端来判断某件事情是不是可以被缓存。

协商缓存是让客户端与服务器之间能实现缓存文件是否更新的验证、提升缓存的复用率，将缓存信息中的Etag和Last-Modified字段通过请求发送给服务器，由服务器校验。如果资源一致则返回 304 并继续使用浏览器缓存，反之返回 200 和最新的资源。

协商缓存流程图如下所示：

协商缓存：让客户端与服务器之间能实现缓存文件是否更新的验证、提升缓存的复用率，将缓存信息中的Etag和Last-Modified 通过请求发送给服务器，由服务器校验。如果文件没有改变，那么直接返回304状态，继续使用浏览器缓存。

HTTP缓存都是从第二次请求开始的：

• 第一次请求资源时，服务器返回资源，并在响应头首部中回传资源的缓存策略。
• 第二次请求时，浏览器判断这些请求参数，击中强缓存就直接返回状态码200，否则就把请求参数加到请求头首部中传给服务器，看是否击中协商缓存，击中则返回304，否则服务器会返回新的资源。

缓存协商流程图

刷新缓存

我们平时对请求的不同处理对缓存的影响是不一样的，使用的缓存策略也是不同的，通常：

• 第一次请求一般都是强制缓存有效
• 当是更新整个页面的操作的时候，是协商缓存有效

正常请求操作

定义： 地址栏输入 url 或者 跳转链接 或者 前进后退等。
对缓存的影响： 强制缓存有效，协商缓存有效。

手动刷新

定义： F5 或者 点击刷新按钮 或者 右击菜单刷新。
对缓存的影响： 强制缓存失效，协商缓存有效。

强制刷新

定义： ctrl + F5 。
对缓存的影响： 强制缓存失效，协商缓存失效。