前端缓存有那些

一、浏览器缓存（HTTP 缓存）

基于 HTTP 协议的缓存机制，由服务器和浏览器共同控制，主要通过响应头字段实现。

1. 强缓存（本地缓存）

浏览器直接从本地缓存获取资源，不发送请求到服务器。

• 工作流程：
  1. 首次请求资源，服务器返回资源及 Cache-Control 或 Expires。
  2. 再次请求时，若未过期，直接从本地缓存读取。

2. 协商缓存（对比缓存）

浏览器发送请求到服务器验证资源是否更新，若未更新则使用缓存。

• 工作流程：

  1. 首次请求资源，服务器返回 Last-Modified 和 ETag。
  2. 再次请求时，浏览器携带 If-Modified-Since 和 If-None-Match。
  3. 服务器对比字段，若未更新则返回 304，否则返回新资源。

二、浏览器存储（本地存储）

三、

Service Worker 是一种独立于主线程的浏览器后台脚本，能够拦截网络请求、管理缓存并实现离线功能

六、CDN 缓存

1. 特点

• 内容分发网络（CDN）将资源缓存到全球各地的边缘服务器，用户就近获取资源，减少延迟。
• 由 CDN 服务商管理缓存策略，可通过 Cache-Control 等响应头配置。
• 使用场景：缓存静态资源（如图片、JS、CSS、视频等），提升全球用户的访问速度。

缓存策略选择建议

• 频繁更新的资源（如 API 接口数据）：使用协商缓存（ETag + 304），每次验证是否更新。
• 不常更新的静态资源（如图片、字体）：使用强缓存（Cache-Control: max-age=xxx），并配合版本号（如 style.v1.0.css），更新时修改版本号强制刷新缓存。
• 需要离线访问的应用：使用 Service Worker 实现自定义缓存策略。
• 用户数据存储：根据时效性选择 LocalStorage（永久）或 SessionStorage（会话级）。