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

相关推荐
小陈工2 小时前
Python Web开发入门(十七):Vue.js与Python后端集成——让前后端真正“握手言和“
开发语言·前端·javascript·数据库·vue.js·人工智能·python
大鸡腿同学6 小时前
【成长类】《只有偏执狂才能生存》读书笔记:程序员的偏执型成长地图
后端
0xDevNull6 小时前
MySQL数据冷热分离详解
后端·mysql
xiaotao1316 小时前
第九章:Vite API 参考手册
前端·vite·前端打包
AI袋鼠帝6 小时前
OpenClaw(龙虾)最强开源对手!Github 40K Star了,又一个爆火的Agent..
后端
午安~婉6 小时前
Electron桌面应用聊天(续)
前端·javascript·electron
彧翎Pro7 小时前
基于 RO1 noetic 配置 robosense Helios 32(速腾) & xsense mti 300
前端·jvm
小码哥_常7 小时前
解锁系统设置新姿势:Activity嵌入全解析
前端
之歆7 小时前
前端存储方案对比:Cookie-Session-LocalStorage-IndexedDB
前端
哟哟耶耶7 小时前
vue3-单文件组件css功能(:deep,:slotted,:global,useCssModule,v-bind)
前端·javascript·css