浏览器有哪几种缓存,各种缓存的优先级是什么样的?

一、在浏览器中,常见的有四种缓存

1、强制缓存

通过设置 Cache-Control 和 Expires 等响应头实现,可以让浏览器直接从本地缓存中读取资源而不发起请求。

2、协商缓存

通过设置 Last-Modified 和 ETag 等响应头实现,可以让浏览器发送条件请求,询问服务器是否有更新的资源。如果服务器返回 304 Not Modified 响应,则表示客户端本地缓存仍然有效,可直接使用缓存的资源。

3、Service Worker 缓存

Service Worker 是一种特殊的 JS 脚本,可以拦截网络请求并返回缓存的响应,以实现离线访问和更快的加载速度等功能。

4、Web Storage 缓存

包括 localStorage 和 sessionStorage。localStorage 用于存储用户在网站上的永久性数据,而 sessionStorage 则用于存储用户会话过程中的临时数据。

二、常见缓存的优先级如下:(从高到低)

① Service Worker 缓存

由于其可以完全控制网络请求,因此具有最高的优先级,即使是强制缓存也可以被它所覆盖。

② 强制缓存

如果存在强制缓存,并且缓存没有过期,则直接使用缓存,不需要向服务器发送请求。

③ 协商缓存

如果强制缓存未命中,但协商缓存可用,则会向服务器发送条件请求,询问资源是否更新。如果服务器返回 304 Not Modified 响应,则直接使用缓存。

④ Web Storage 缓存

Web Storage 缓存的优先级最低,只有在网络不可用或者其他缓存都未命中时才会生效。

相关推荐
用户22046039586811 分钟前
ES模块和commonJS两种标准下中实现__dirname?一篇文章教你理清楚
前端
犹豫的大炮38 分钟前
jQuery最核心的基础设施之一——数据缓存模块进化史
前端·缓存·jquery
小碗细面39 分钟前
从 PRD 到上线:SpecKit 如何让 AI 真正参与前端交付
前端·ai编程·claude
WL学习笔记40 分钟前
链式队列(数据结构)
前端·数据结构·jquery
我是大卫42 分钟前
React源码解析-第三部分:协调与提交
前端·react.js·源码
都想学44 分钟前
我把 12 个在线工具关掉了,换成了一个 Chrome 扩展
前端·chrome
xiaogai_gai1 小时前
钉钉数据集成到金蝶云星空案例分享:传给钉钉后,回传金蝶字段
java·前端·钉钉
步步为营DotNet1 小时前
借助 Semantic Kernel 与 Blazor 构建智能交互式前端应用
前端
宠友信息1 小时前
资源权限与钱包流水在即时通讯源码后端架构中的设计
java·spring boot·redis·websocket·缓存
Highcharts1 小时前
从 ECharts 平滑迁移 Highcharts的配置映射与踩坑手册
前端·javascript