本文目录导读：

1. 引言
2. 1. 浏览器缓存的基本概念
3. 2. Cache-Control：控制强缓存
4. 3. ETag：实现协商缓存
5. 4. Cache-Control与ETag的协同优化
6. 5. 实际案例分析
7. 6. 总结

在现代Web开发中，优化网页加载速度是提升用户体验的关键因素之一，浏览器缓存策略的合理配置可以显著减少网络请求，降低服务器负载，并加快页面渲染速度。Cache-Control和ETag是HTTP缓存机制中最重要的两个配置项，本文将深入探讨它们的原理、配置方式及最佳实践,帮助开发者优化缓存策略。

---

浏览器缓存的基本概念

浏览器缓存是指浏览器将请求过的资源（如HTML、CSS、JavaScript、图片等）存储在本地，以便后续访问时可以直接从本地加载，而无需再次向服务器请求,合理的缓存策略可以：

• 减少网络请求：降低带宽消耗,提高页面加载速度。
• 减轻服务器压力：减少重复请求,提高服务器响应能力。
• 提升用户体验：加快页面渲染,减少等待时间。

HTTP缓存主要分为强缓存和协商缓存两种机制：

1. 强缓存：浏览器直接从本地缓存读取资源，不向服务器发送请求，由Cache-Control和Expires控制。
2. 协商缓存：浏览器向服务器发送请求，由服务器判断资源是否更新，决定是否返回新内容，由ETag和Last-Modified控制。

---

Cache-Control：控制强缓存

Cache-Control是HTTP/1.1引入的缓存控制头部，比Expires更灵活，支持多种指令,可以精确控制缓存行为。

1 常用指令

指令	说明
max-age=<seconds>	资源缓存的最大时间（秒）
no-cache	不使用强缓存，每次请求都向服务器验证
no-store	禁止缓存，每次请求都重新获取资源
public	响应可被任何缓存（如CDN、代理服务器）存储
private	响应仅限用户浏览器缓存，中间代理不可缓存
must-revalidate	缓存过期后必须向服务器验证

2 配置示例

Cache-Control: public, max-age=3600  # 缓存1小时，允许CDN缓存
Cache-Control: private, max-age=600 # 缓存10分钟，仅限浏览器缓存
Cache-Control: no-cache             # 禁用强缓存，每次请求都验证
Cache-Control: no-store             # 完全不缓存，适用于敏感数据

3 最佳实践

• 静态资源（CSS/JS/图片）：使用max-age设置较长的缓存时间（如1年），并结合文件名哈希（main.[hash].js）确保更新后能获取新版本。
• （HTML/API）：使用no-cache或较短的max-age,确保用户获取最新数据。
• 敏感数据（用户信息）：使用private或no-store,避免泄露。

---

ETag：实现协商缓存

ETag（Entity Tag）是服务器返回的资源唯一标识符，用于协商缓存，当浏览器再次请求资源时，会携带If-None-Match头部（包含ETag值），服务器比对ETag决定返回304 Not Modified（使用缓存）或200 OK（返回新资源）。

1 ETag的生成方式

• 强ETag：基于文件内容生成（如MD5哈希），内容变化时ETag必变。
• 弱ETag：以W/开头，仅表示语义变化（如文件修改时间）,适用于大文件优化。

2 配置示例

ETag: "33a64df551425fcc55e4d42a148795d9"  # 强ETag
ETag: W/"0815"                            # 弱ETag

3 工作流程

1. 浏览器首次请求资源，服务器返回ETag。
2. 浏览器再次请求时，携带If-None-Match: "33a64df551425fcc55e4d42a148795d9"。
3. 服务器比对ETag：
   • 匹配 → 返回304 Not Modified,浏览器使用缓存。
   • 不匹配 → 返回200 OK和新资源。

4 最佳实践

• 静态资源：结合Cache-Control: max-age和ETag，既利用强缓存减少请求,又确保更新后能获取新版本。
• 动态API：使用ETag避免重复传输未变化的数据。
• CDN兼容性：确保CDN支持ETag,否则可能失效。

---

Cache-Control与ETag的协同优化

1 典型缓存策略

1. 长期缓存静态资源：

   Cache-Control: public, max-age=31536000  # 缓存1年
   ETag: "33a64df551425fcc55e4d42a148795d9"

   • 结合文件哈希（如app.[hash].js），确保内容变化后URL改变,强制浏览器获取新资源。

2. 协商缓存：

   Cache-Control: no-cache
   ETag: W/"0815"

   • 每次请求都验证ETag,减少不必要的数据传输。

2 避免缓存问题

• 缓存污染：错误的max-age可能导致用户长时间看到旧内容，可通过版本控制（如?v=1.0）解决。
• CDN缓存不一致：确保CDN遵循Cache-Control和ETag,必要时手动刷新CDN缓存。

---

实际案例分析

1 静态资源优化

# 服务器响应
HTTP/1.1 200 OK
Cache-Control: public, max-age=31536000
ETag: "33a64df551425fcc55e4d42a148795d9"

• 浏览器缓存1年,后续请求优先使用缓存。
• 文件更新后，URL变化（如app.abc123.js）,强制加载新资源。

2 API数据缓存

# 服务器响应
HTTP/1.1 200 OK
Cache-Control: no-cache
ETag: W/"12345"

• 每次API请求都验证ETag，未变化时返回304,减少数据传输。

---

合理配置Cache-Control和ETag可以显著提升Web应用性能：

• Cache-Control：控制强缓存,适用于静态资源长期缓存。
• ETag：实现协商缓存,适用于动态内容验证。
• 结合使用：静态资源用max-age+ETag用no-cache+ETag。

通过优化缓存策略，开发者可以减少服务器负载、加快页面加载速度,并提供更流畅的用户体验。