图解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缓存自述

相关推荐
openKaka_3 分钟前
从 scheduleUpdateOnFiber 到 Root 微任务调度:React 如何把更新交给调度系统
开发语言·前端·javascript
CoovallyAIHub10 分钟前
铁路环境障碍物检测新框架:YOLOv11+MiDaS+LiDAR 深度融合,距离估计MAE低至0.63米
前端
C澒14 分钟前
AI CR:前端团队代码审查规范及高频坑汇总
前端·ai·code review
盏灯14 分钟前
以前有一个同事说:最讨厌下班提需求又没电脑在身边...
前端·后端·面试
人道领域14 分钟前
【黑马点评日记】:用户签到功能详解——从Bitmap入门到避坑指南
java·数据库·redis·后端
LIO17 分钟前
一文读懂 Vue 3:核心特性、组合式 API 与最佳实践
前端·vue.js
LIO19 分钟前
前端响应式通用 CSS(Flex 为主,含主色调)
前端·css
前进的李工21 分钟前
智能Agent实战指南:记忆组件嵌入技巧(记忆)
开发语言·前端·javascript·python·langchain·agent
西洼工作室24 分钟前
B站登录流程全解析:RSA+极验验证
前端·python·极验
十有八七44 分钟前
AI Agent的“骨架”之争:四种Harness设计哲学深度解构
前端·人工智能