前端缓存机制详

前端缓存机制详解

缓存机制基本概念

浏览器缓存主要分两大类：

• 强缓存：不请求服务器，直接使用本地缓存 ⭐
• 协商缓存：请求服务器，服务器决定是否使用缓存 ⭐

强缓存实现方式

// 设置强缓存的两种方式
// 1. HTTP/1.0方式（不推荐，依赖客户端时间）
Expires: Wed, 21 Oct 2022 07:28:00 GMT

// 2. HTTP/1.1方式（推荐，相对时间）
Cache-Control: max-age=3600

强缓存过期后的处理流程

浏览器发起请求
     ↓
检查是否有缓存
     ↓
缓存存在且未过期 → 直接使用缓存（不发送请求）
     ↓
缓存过期 → 发起协商缓存请求 → 携带验证头部
     ↓
服务器验证资源是否变化
     ↓
没有变化 → 返回304 Not Modified（不返回内容）
     ↓
有变化 → 返回200 OK（返回新内容）

完整缓存流程图