图解HTTP缓存,一文‘毙’之

经常对于HTTP缓存感到困惑,一遍又一遍。今天,我将以图文形式为你解析HTTP缓存(通俗易懂),让你不再害怕😎

1、HTTP缓存的诞生🥚

  • 服务器压力太大 🍐
  • 想个折中的办法: HTTP缓存出现,帮助服务器减小很多压力

2、后来出现问题了😭:

1、 服务器更新后,缓存没有更新

2、缓存设置过期时间, Expires的诞生🥚

Expires 响应头包含日期/时间,即在此时候之后,响应过期。

yaml 复制代码
// 过期时间
Expires: Wed, 21 Oct 2015 07:28:00 GMT

BUT,⚠但Expires不完美,它是服务端返回的,它对比客户端时间,难免会出现不一致,那么资源更新有会出问题, 于是Cacahe-Control登场喽

3、Cacahe-Control 过期时长🐺

Cache-Control 通用消息头字段,被用于在 http 请求和响应中,通过指定指令来实现缓存机制。缓存指令是单向的,这意味着在请求中设置的指令,不一定被包含在响应中。

arduino 复制代码
Cache-Control:public, max-age=31536000
1、Cache-Control的诞生🥚

但是,随着请求量增大,缓存也超过了时长, 服务器压力又扛不住了,然后就出现了强缓存和协商缓存

2、强缓存 VS 协商缓存
  • 强缓存:浏览器不会像服务器发送任何请求,直接从本地缓存中读取文件并返回Status Code: 200 OK

  • 协商缓存:向服务器发送请求,服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存,如果命中,则返回304状态码并带上新的response header通知浏览器从缓存中读取资源;

然后详细的协商过程就出现了Last-Modified(最后修改时间)

4、Last-Modified 最后修改时间 🐗

Last-Modified 是一个响应首部,其中包含源头服务器认定的资源做出修改的日期及时间。它通常被用作一个验证器来判断接收到的或者存储的资源是否彼此一致。由于精确度比 ETag 要低,所以这是一个备用机制。

具体流程如下:

又又又出问题了: 有新资源的时候,服务器还返回304状态,因为# If-Modified-Since的值是以秒S为单位的,对于1S之内资源的改变,缓存就得不到得不到更新,然后Etag闪亮✨登场

5、ETag文件内容唯一标识 🐴

ETag HTTP 响应头是资源的特定版本的标识符。这可以让缓存更高效,并节省带宽,因为如果内容没有改变,Web 服务器不需要发送完整的响应。而如果内容发生了变化,使用 ETag 有助于防止资源的同时更新相互覆盖("空中碰撞")

3、小结

关于HTTP缓存基本就如下图所示,有了这个逻辑也就不怕再谈HTTP缓存了🤪🤪🤪

参考资料:MDN-HTTPHTTP缓存自述

相关推荐
mCell13 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip13 小时前
Node.js 子进程:child_process
前端·javascript
你的人类朋友15 小时前
说说签名与验签
后端
databook15 小时前
Manim实现脉冲闪烁特效
后端·python·动效
excel17 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel18 小时前
Node.js 断言与测试框架示例对比
前端
canonical_entropy19 小时前
AI时代,我们还需要低代码吗?—— 一场关于模型、演化与软件未来的深度问答
后端·低代码·aigc
天蓝色的鱼鱼19 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping19 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
颜如玉19 小时前
HikariCP:Dead code elimination优化
后端·性能优化·源码