理解 HTTP 缓存中的 Cache-Control 和 ETag

打开浏览器的网络选项卡，你经常会看到 Cache-Control 和 ETag 出现在图像、样式表和脚本的响应标头中。虽然许多开发者认得这些术语，但很少有人能解释它们在缓存中是如何协同工作的。随着 Web 性能继续成为开发者的首要任务，理解这些标头变得非常重要。

什么是 HTTP 缓存？

HTTP 缓存允许浏览器或内容分发网络 (CDN) 存储它已获取的响应，例如图像或脚本。浏览器可以重复使用存储的版本，而不是再次向服务器请求相同的资源。这加快了页面加载时间并减少了服务器负载。然而，如果没有明确的指令，浏览器可能会猜测缓存的响应是否仍然有效，从而导致不一致。

这些标头解决的问题

Cache-Control 和 ETag 通过提供来自服务器的明确指令，有助于消除猜测。它们回答了两个不同的问题：

• Cache-Control：“你可以完全跳过询问我多长时间？”
• ETag：“一旦该期限结束，你如何能以低成本检查是否真的有任何改变？”

Cache-Control 控制什么

该 Cache-Control 标头设置了关于资源可以缓存多长时间的规则。例如，如果服务器发送一个带有该标头的响应：

Cache-Control: public, max-age=2592000, immutable

这意味着：

• public：该资源可以被任何缓存所缓存，包括像 CDN 这样的共享缓存。
• max-age=2592000：该资源在 30 天（2,592,000 秒）内是新鲜的。在此期间，浏览器无需联系服务器。
• immutable：内容在这个新鲜度期限内不会改变，因此浏览器可以使用缓存的版本而无需检查。

使用 immutable 仅当 URL 始终指向相同内容时才是安全的。

ETag 控制什么

一旦 max-age 期限过期，浏览器不会丢弃缓存的副本。相反，它会向服务器检查旧副本是否仍然有效。这就是 ETag 发挥作用的地方。一个 ETag 是一个唯一标识符，通常是内容的哈希值。如果内容发生改变， ETag 也会随之改变。它的工作原理如下：

1. 服务器返回一个 ETag，例如， ETag: "abc123".
2. 浏览器会记住这个值。当缓存的副本过期时，它会发送一个请求并附带 If-None-Match: "abc123".
3. 服务器检查当前的 ETag。如果它没有改变，它会回复 304 Not Modified，允许浏览器继续使用其缓存的副本而无需重新下载资源。

这个过程节省了带宽并加快了加载时间。

为什么有些项目跳过 ETag

在某些情况下，比如在 ogp-generator.php 项目中，使用 ETag 可能看起来是不必要的。该项目根据帖子的最后修改时间为每张图片生成一个唯一的文件名。这种被称为缓存破坏的技术，确保了每当帖子被编辑时，URL 都会发生改变。因此，不需要 ETag ，因为 URL 本身就保证了内容是新鲜的。

结论

Cache-Control 和 ETag 对于管理 Web 开发中的缓存都是必不可少的，但它们的作用不同。 Cache-Control 规定了资源可以被缓存多长时间，而 ETag 则帮助确认内容在缓存期后是否发生了变化。

优点

• 通过减少服务器请求来提高 Web 性能。
• 通过防止不必要的下载来节省带宽。
• 向浏览器和 CDN 提供明确的缓存指令。

缺点

• 配置错误可能导致提供过时的内容。
• 需要仔细管理以确保 URL 指向正确的内容。

注意事项

本文仅供教育目的。请始终在您的应用程序中将占位符值替换为实际数据。在依赖任何声明之前，请对照原始来源进行验证。

常见问题解答

• 什么是 Cache-Control？ — Cache-Control 是一个 HTTP 标头，用于指定资源可以被缓存多长时间以及在什么条件下缓存。
• ETag 代表什么？ — ETag 代表 Entity Tag（实体标签），它是资源特定版本的唯一标识符。
• Cache-Control 如何提高性能？ — 它允许浏览器缓存资源，从而减少对服务器重复请求的需求。
• 我应该什么时候使用 ETag？ — 当你想在缓存资源的新鲜度期限后，高效地验证它是否已改变时，请使用 ETag。
• 什么是缓存破坏？ — 缓存破坏是一种在资源内容发生变化时更改其 URL 的技术，确保用户收到更新后的版本。
• 我可以只使用 Cache-Control 而不使用 ETag 吗？ — 是的，您可以单独使用 Cache-Control，但 ETag 提供了一种在缓存后确认内容新鲜度的方法。

标签

#http #caching #webdevelopment #performance #etag #cachecontrol #webdesign #frontend #backend #optimization