前端协商缓存和强缓存

在Web开发中,缓存是一种重要的性能优化技术,有两种主要的缓存策略:协商缓存和强缓存。

强缓存:

强缓存是指浏览器在请求资源时,先检查本地缓存,如果资源的缓存有效(未过期),浏览器直接从本地缓存中获取资源,而不会向服务器发送请求。这样可以有效减少网络传输,提高页面加载速度。

在强缓存中,常见的控制缓存的响应头字段有:

  • Cache-Control:通过指定max-age来设置资源的有效期(秒),如Cache-Control: max-age=3600表示该资源在缓存有效期为3600秒(1小时)。
  • Expires:指定资源的过期时间,是一个绝对时间,通常与Cache-Control一起使用,但优先级低于Cache-Control

协商缓存:

当资源的强缓存失效时,浏览器会发送请求到服务器,通过协商缓存来确定是否需要重新获取资源。服务器会比较客户端发送的请求中的缓存标识(例如If-Modified-SinceIf-None-Match)与服务器上资源的标识(例如Last-ModifiedETag),然后返回相应的状态码,通知客户端是否需要重新获取资源。

常见的协商缓存控制响应头字段有:

  • Last-Modified:指定资源的最后修改时间。
  • ETag:指定资源的唯一标识符(通常是资源内容的哈希值)。
  • If-Modified-Since:客户端发送的请求头字段,指定资源的最后修改时间,服务器通过比较此时间与资源的最后修改时间来判断是否需要返回新的资源。
  • If-None-Match:客户端发送的请求头字段,指定资源的唯一标识符,服务器通过比较此标识符与资源的当前标识符来判断是否需要返回新的资源。

如果资源未发生变化,则服务器可能返回304 Not Modified状态码,告知浏览器继续使用本地缓存。

综合使用强缓存和协商缓存可以有效地优化页面加载性能,减少不必要的网络传输。

总结:

1.强缓存涉及响应头字段:Cache-Control: max-age=3600 Expires

2.协商缓存

客户端涉及请求头字段:If-Modified-Since,If-None-Match

服务器资源标志:Last-Modified,ETag

相关推荐
披着羊皮不是狼1 天前
(7)为 RAG 系统接入 Redis Stack 实现向量持久化
数据库·redis·缓存
難釋懷1 天前
数据同步策略
缓存
程序员潘子1 天前
【保姆级教程】B 站缓存 m4s 文件转 MP4,无损合成一行命令搞定
缓存·ffmpeg·ffmpeg\
Micro麦可乐1 天前
Redis只会用来做缓存?解锁Redis非缓存的九个应用场景,90%程序员不知道的隐藏技能
数据库·redis·缓存·消息队列·分布式锁·延迟队列·布隆过滤器
键盘鼓手苏苏1 天前
Flutter 三方库 persistent_cache_simple 的鸿蒙化适配指南 - 实现具备磁盘溢出淘汰与极简 API 的本地持久化缓存、支持端侧资源异步落地与状态秒开实战
flutter·缓存·harmonyos
21号 11 天前
10.Redis 缓存
数据库·redis·缓存
从零开始的-CodeNinja之路1 天前
【Redis】Redis 缓存应用、淘汰机制—(四)
java·redis·缓存
星辰徐哥1 天前
CDN工作原理:节点缓存、智能调度,减少跨网传输延迟
服务器·缓存·php
星辰徐哥1 天前
ARP缓存表:作用、查看方法与刷新技巧
开发语言·缓存·php
Jul1en_2 天前
【Redis】String 类型命令、编码方式与应用场景
数据库·redis·缓存