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

简介: HTTP协议的缓存策略有哪些?

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 。

对缓存的影响: 强制缓存失效,协商缓存失效。

相关文章
|
4天前
|
存储 缓存 安全
第二章 HTTP请求方法、状态码详解与缓存机制解析
第二章 HTTP请求方法、状态码详解与缓存机制解析
|
4天前
|
缓存 安全 前端开发
探索HTTP协议:网络通信的基石
探索HTTP协议:网络通信的基石
|
4天前
|
Web App开发 存储 缓存
第八篇 提升网页性能:深入解析HTTP请求优化策略(三)
第八篇 提升网页性能:深入解析HTTP请求优化策略(三)
|
4天前
|
消息中间件 前端开发 JavaScript
第七篇 提升网页性能:深入解析HTTP请求优化策略(二)
第七篇 提升网页性能:深入解析HTTP请求优化策略(二)
|
4天前
|
缓存 自然语言处理 前端开发
第一章 引言-HTTP协议基础概念和前后端分离架构请求交互概述
第一章 引言-HTTP协议基础概念和前后端分离架构请求交互概述
|
3天前
|
存储 缓存 监控
中间件Read-Through Cache(直读缓存)策略实现方式
【5月更文挑战第11天】中间件Read-Through Cache(直读缓存)策略实现方式
11 4
中间件Read-Through Cache(直读缓存)策略实现方式
|
3天前
|
存储 缓存 监控
中间件Read-Through Cache(直读缓存)策略注意事项
【5月更文挑战第11天】中间件Read-Through Cache(直读缓存)策略注意事项
8 2
|
3天前
|
存储 缓存 中间件
中间件Read-Through Cache(直读缓存)策略工作原理
【5月更文挑战第11天】中间件Read-Through Cache(直读缓存)策略工作原理
10 3
http协议 报文 给你讲明白咯,web开发基础
http协议 报文 给你讲明白咯,web开发基础
|
4天前
|
缓存 算法 前端开发
前端开发者必知的缓存淘汰策略:LRU算法解析与实践
前端开发者必知的缓存淘汰策略:LRU算法解析与实践