强缓存和协商缓存

文章目录

一、强缓存

比方说 我的页面引入了个css文件 每次请求都要重新找服务器拿数据 浪费资源 所以我们要把数据存起来 直接使用 我们可以用强缓存

服务器可以通过在响应头里设置Cache-Control: max-age=31536000,max-age代表缓存时间,单位为秒,这里的数据换算过来就是一年,意味着在一年内浏览器不会再向服务器发送请求 直接读取存起来的数据

过期后就是不带括号重新获取服务器资源

还有 Expires 、Expires 是一个缓存指令,用于指定资源的过期时间。服务器端在响应头中设置 Expires,来指示客户端缓存数据的有效期。客户端在缓存失效之前,会使用缓存数据。如果服务器端的缓存有效期为永久(Expires 为 0 或负数,或者Cache-Control 值为 max-age=0 或 must-revalidate),或者服务器在响应头中没有设置这些值,则客户端不能缓存数据。

例如:

复制代码
HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: public
Expires: Wed, 20 Sep 2022 10:00:00 GMT

<html>
  ...
</html>

在这个例子中,服务器端设置 Expires 为 2022-09-20 10:00:00,客户端会在这个时间之前使用缓存数据。

Cache-control的优先级要高于Expires,如果两者同时设置,会优先使用Cache-control而忽略掉Expires

二、协商缓存

浏览器初次请求资源,服务器返回资源,同时生成一个Etag值携带在响应头里返回给浏览器,当浏览器再次请求资源时会在请求头里携带If-None-Match,值是之前服务器返回的Etag的值,服务器收到之后拿该值与资源文件最新的Etag值做对比。

如果没有变化则返回304,告诉浏览器继续使用缓存(不返回资源文件)。

如果发生变化,则返回200和最新的资源文件给浏览器使用。


相关推荐
恋猫de小郭几秒前
小米 HyperOS 4 大变样?核心应用以 Rust / Flutter 重写,不兼容老系统
android·前端·人工智能·flutter·ios
李火火的安全圈6 分钟前
基于Yakit、Wavely实现CVE-2025-55182(React Server Components(RSC)) 反序列化漏洞挖掘和POC编写
前端·react.js
“αβ”10 分钟前
IP协议内容补充
服务器·网络·网络协议·tcp/ip·智能路由器·nat·ip协议
深圳市恒讯科技15 分钟前
2026新加坡服务器硬件防火墙配置推荐
运维·服务器·云计算
小江||小廖15 分钟前
服务器如何设置共享文件夹,让其他内网电脑可以访问
运维·服务器
Orange_sparkle16 分钟前
dify的web页面如何传入user用户信息进行对话,而不是uuid
前端·人工智能
小虾米vivian17 分钟前
达梦使用dmfldr和外部表导入txt数据(windows环境)
java·服务器·数据库
历程里程碑20 分钟前
Linux19 实现shell基本功能
linux·运维·服务器·算法·elasticsearch·搜索引擎·哈希算法
霍格沃兹测试学院-小舟畅学23 分钟前
Playwright测试超时管理:全局与局部超时设置
运维·服务器·网络
Amumu1213825 分钟前
Vue Router 和 常用组件库
前端·javascript·vue.js