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

相关推荐
MiyueFE26 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子31 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
2501_9160137435 分钟前
用Fiddler中文版抓包工具掌控微服务架构中的接口调试:联合Postman与Charles的高效实践
websocket·网络协议·tcp/ip·http·网络安全·https·udp
哔哩哔哩技术37 分钟前
资源合池化后的异构差异问题解析--CPU分层现象和解决思路
后端
qq_49244844639 分钟前
Java 访问HTTP,信任所有证书,解决SSL报错问题
java·http·ssl
爱上语文42 分钟前
Redis基础(4):Set类型和SortedSet类型
java·数据库·redis·后端
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端