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

协商缓存和强缓存是 HTTP 缓存机制中的两种不同的策略,用于减少网络请求并提高网页加载速度。它们之间的主要区别在于缓存的验证方式服务器返回的响应头

强缓存:

  • 强缓存是基于过期时间(Expires)和缓存标识(Cache-Control)的策略。
  • 当浏览器发起请求时,会先检查本地缓存是否过期。如果缓存未过期,浏览器直接从本地缓存中获取资源,不发送请求到服务器。
  • 服务器通过设置响应头的 ExpiresCache-Control 字段来指定资源的过期时间或缓存规则。
  • 如果缓存过期,浏览器会发送请求到服务器,并在请求头中包含 If-Modified-SinceIf-None-Match 字段,以告知服务器上次获取资源时的时间或资源的标识。
  • 如果服务器返回 304 Not Modified 状态码,表示资源未发生变化,浏览器可以继续使用本地缓存,否则服务器返回新的资源。

协商缓存:

  • 协商缓存是基于实体标签(ETag)和最后修改时间(Last-Modified)的策略。
  • 当浏览器发起请求时,会发送资源的实体标签和最后修改时间等信息到服务器。
  • 服务器通过比较请求头中的实体标签(If-None-Match)或最后修改时间(If-Modified-Since)与资源的当前状态进行验证。
  • 如果资源未发生变化,服务器返回 304 Not Modified 状态码,浏览器可以使用本地缓存。如果资源有更新,服务器返回新的资源。

主要区别:

  • 强缓存是基于过期时间或缓存规则进行验证,而协商缓存是基于实体标签或最后修改时间进行验证。
  • 强缓存不与服务器进行通信,直接从本地缓存获取资源,而协商缓存需要与服务器进行通信以验证资源的状态。
  • 强缓存的响应头字段是 ExpiresCache-Control,而协商缓存的响应头字段是 ETagLast-Modified

通常情况下,浏览器会先使用强缓存进行验证,如果缓存过期,则使用协商缓存进行进一步的验证,以确保获取最新的资源。这样可以在一定程度上减少对服务器的请求,并提供更快的访问速度。

相关推荐
糕冷小美n2 小时前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
小哥不太逍遥2 小时前
Technical Report 2024
java·服务器·前端
沐墨染2 小时前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code
anOnion2 小时前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
threerocks2 小时前
前端将死,Agent 永生
前端·人工智能·ai编程
问道飞鱼3 小时前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴3 小时前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
Aliex_git5 小时前
浏览器 API 兼容性解决方案
前端·笔记·学习
独泪了无痕5 小时前
useStorage:本地数据持久化利器
前端·vue.js
程序员林北北5 小时前
【前端进阶之旅】JavaScript 一些常用的简写技巧
开发语言·前端·javascript