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

一、浏览器的缓存策略

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

强缓存:

当浏览器第一次发送请求后,服务器会返回缓存标识,在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 分钟前
小六壬排盘工具源码 自适应双端 纯原生HTML+JS
前端·javascript·html
Slow菜鸟4 分钟前
Codex CLI 教程(五)| AI 驱动项目从零到一:面向 Java 全栈工程师打造个人 ECC(V2版)
java·开发语言·人工智能
月落归舟13 分钟前
java基础之拷贝、单例
java·单例·拷贝
鬼蛟17 分钟前
什么是 Git
java
直奔標竿37 分钟前
SpringAI + RAG + MCP + Agent 零基础全栈实战(完结篇)| 27课完整汇总,Java开发者AI转型必看
java·开发语言·人工智能·spring boot·后端·spring
云烟成雨TD38 分钟前
Spring AI 1.x 系列【31】向量数据库:进阶使用指南
java·人工智能·spring
Championship.23.241 小时前
Open Source Pipeline Skill深度解析:自动化开源贡献全流程
前端·javascript·html
Bigger1 小时前
🧠 前端岗位的"结构性调整":现象背后的冷思考
前端·程序员·ai编程
薯老板1 小时前
vue组件之间的通信
前端·vue.js
迪菲赫尔曼1 小时前
从 0 到 1 打造工业级推理控制台:UltraConsole(Ultralytics + FastAPI + React)开源啦!
前端·yolo·react.js·计算机视觉·开源·fastapi