(十三)强缓存和协商缓存的区别

一、浏览器的缓存策略

浏览器的缓存策略是指浏览器在加载页面时如何使用和管理缓存机制。可以提高网页加载速度,减轻服务器负载,并提供更好的用户体验。常用的缓存策略有两种:一种是发送请求(协商缓存),一种是不需要发送请求(强缓存)。

强缓存:

当浏览器第一次发送请求后,服务器会返回缓存标识,在http1.0使用expires,http/1.1时是cache-control。当浏览器需要使用资源的时候,会去查看文件缓存标识是否过期,如果没有过期就从缓存中获取资源。

expires:规定一个缓存失效时间,过了这个时间,浏览器就需要重新发送请求获取资源。缺陷:浏览器和服务器的时间可能存在误差。

cache-control:规定一个,max-age(有效时长),即服务器返回后资源可以使用,max-age时长。

cache-control值包括:

  • public:表示响应可以被任何对象(包括浏览器和CDN等)缓存
  • private:只能被浏览器缓存,不能被CDN等其他对象缓存
  • no-cache:浏览器使用缓存前必须向服务器发送请求验证
  • no-store:表示不缓存任何响应内容。
    expires和cache-control同时存在浏览器优先使用cache-control。

缓存过期策略:

通过设置响应头中的Expires或Cache-Control字段,可以指定资源的过期时间。当资源过期时,浏览器会重新发送请求到服务器获取最新资源。

协商缓存:

当强缓存失效时,浏览器会发送一个请求到服务器,服务器会根据请求头中携带tag(last-modified。和Etag)与服务器上资源的资源的相关字段进行比较。如果资源未发生变化,则服务器返回304状态码,告诉浏览器可以使用本地缓存。

缓存位置:

  • memory cache:内存缓存是所有缓存运行速度最快的,到那时内存小,保存时间短。
  • disk cache:磁盘缓存,内存较大,效率比内存缓存低。
  • service worker cache:运行于浏览器背后,独立于网页,有自己的生命周期。可操作性高,开发人员可以控制缓存内容,例如控制仅缓存离线内容或者全部缓存。在离线情况还可以去读取缓存的资源。
  • disk cache:http2的内容,需要浏览器和服务器都支持,可以提前与缓存。缓存即将可能用到的数据,服务器不再等待浏览器请求,可以主动通过http2发送数据,极大地提高了网页运行速度性能。

强缓存和协商缓存的区别:

1. 数据来源与交互方式

强缓存:

在缓存的有效期内在 本地缓存 拿数据,即浏览器与服务器之间不会有交互。
协商缓存:

每次请求都会与浏览器进行交互。浏览器会向服务器发送请求,询问资源是否有更新,服务器根据请求中的某些标识(ETag或Last-Modified)来判断资源是否发生变化,并做出响应。

2. 响应状态码:

强缓存:

如果命中强缓存,浏览器会直接读取本地缓存,而不会向服务器发请求。强缓存状态码为200(OK)
协商缓存:

如果资源未发生变化,服务器会返回304(Not MOdidied)状态码,表示浏览器可以根据使用本地缓存的数据。如果有更新,则会返回新的数据。

3. 缓存验证机制

强缓存:

通过 ExpiresCache-Control 这两个HTTP请求头信息实现,指定缓存的有效期。在有效期内,浏览器不会向服务器发请求
协商缓存:

通过ETagLast-Modified这两个请求头实现。ETag是一个资源的唯一标识,Last-Modified表示资源最后的修改时间。浏览器在请求时会带上这两个信息,服务器会根据这些信息来判断资源是否发生了变化。

4. 刷新策略

f5刷新网页时,跳过强缓存,进行协商缓存

ctrl+f5刷新页面时会跳过强缓存和协商缓存,直接向服务器请求

总结

缓存类型 获取资源形式 状态码 发送请求到服务器
强缓存 从本地缓存 200(from cache) 否,直接从缓存取
协商缓存 从缓存取 304(Not Modified) 否,通过服务器来告知缓存是否可用

参考:
https://blog.csdn.net/qq_63140280/article/details/131396490?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171263296216800184140665%2522%252C%2522scm%2522%253A%252220140713.130102334...%2522%257D&request_id=171263296216800184140665&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-2-131396490-null-null.142v100pc_search_result_base1&utm_term=%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5&spm=1018.2226.3001.4187

https://blog.csdn.net/weixin_45822171/article/details/136850590

https://blog.csdn.net/m0_48076809/article/details/119304747

相关推荐
寻星探路2 小时前
【深度长文】万字攻克网络原理:从 HTTP 报文解构到 HTTPS 终极加密逻辑
java·开发语言·网络·python·http·ai·https
崔庆才丨静觅4 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
陌上丨4 小时前
Redis的Key和Value的设计原则有哪些?
数据库·redis·缓存
曹牧4 小时前
Spring Boot:如何测试Java Controller中的POST请求?
java·开发语言
passerby60614 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅5 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
爬山算法5 小时前
Hibernate(90)如何在故障注入测试中使用Hibernate?
java·后端·hibernate