HTTP缓存技术

HTTP缓存是指浏览器在访问网页资源时，为了提高性能和减少网络请求次数，将之前请求过的资源保存在本地的一种机制。当用户再次访问同一资源时，浏览器可以直接从缓存中获取资源，而不需要再次向服务器发起请求，从而加快页面加载速度。

一、HTTP缓存的分类

HTTP缓存主要分为两大类：

  • 强缓存
  • 协商缓存

1.1 强缓存（Strong Cache）

强缓存：不需要向服务器发请求，直接使用本地缓存

  • 浏览器直接返回缓存内容
  • 状态码：200 (from memory cache / disk cache)

常用字段

  • Cache-Control（HTTP/1.1，主流）
  • Expires（HTTP/1.0，已过时）

1.2 协商缓存（Conditional Cache）

需要向服务器确认缓存是否过期

  • 浏览器发送请求
  • 服务器判断资源是否变化
  • 没变：返回 304 Not Modified
  • 变了：返回 200 + 新资源

常用字段：

  • Last-Modified / If-Modified-Since
  • ETag / If-None-Match

二、强缓存详解

2.1 Cache-Control（核心）

常见指令：

指令 含义
max-age=3600 缓存有效期（秒）
no-cache 不使用强缓存，走协商缓存
no-store 完全不缓存
public 可被代理缓存
private 只能被浏览器缓存

示例：

1
Cache-Control: max-age=3600

表示 1 小时内直接使用缓存。

2.2 Expires（了解）

1
Expires: Wed, 21 Oct 2025 07:28:00 GMT

问题：

  • 依赖客户端时间 ❌
  • 已被 Cache-Control 替代

三、协商缓存详解

3.1 Last-Modified（基于时间）

流程：

  1. 服务器返回：

    1
    Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT

  2. 浏览器下次请求：

    1
    If-Modified-Since: Wed, 21 Oct 2025 07:28:00 GMT

  3. 服务器判断：

    • 未修改 → 304
    • 已修改 → 200

缺点：

  • 精度只有秒 ❌
  • 文件内容变了但时间没变 ❌

3.2 ETag（基于内容）

流程：

  1. 服务器返回：

    1
    ETag: "abc123"

  2. 浏览器请求：

    1
    If-None-Match: "abc123"

  3. 服务器判断：

    • 相同 → 304
    • 不同 → 200

优点：

  • 精确判断内容变化 ✅
  • 比 Last-Modified 更可靠

四、缓存优先级

面试必答点

1
2
Cache-Control > Expires
ETag > Last-Modified

五、整体缓存流程

浏览器请求资源时：

1
2
3
4
5
6
7
8
9
1. 先看强缓存（Cache-Control / Expires）
   ↓
   命中 → 直接返回（200 from cache）

2. 强缓存未命中 → 走协商缓存
   ↓
   命中 → 返回 304

3. 都未命中 → 返回新资源（200）

六、一句话总结（面试用）

可以这样回答：

HTTP缓存分为强缓存和协商缓存。强缓存通过 Cache-Control 控制，在有效期内不请求服务器；协商缓存通过 ETag 或 Last-Modified 与服务器校验资源是否变化，未变化返回304。实际中优先使用 Cache-Control 和 ETag，它们分别是强缓存和协商缓存的核心机制。