利用浏览器缓存 - expires 或 max-age, last-modified 或 etag

Question

对于什么是利用浏览器缓存提高页面速度的正确方法，我很难找到一个明确、实用的解释。

根据this site：

指定 Expires 或 Cache-Control max-age 之一很重要， 和 Last-Modified 或 ETag 之一，用于所有可缓存资源。它是 多余地指定 Expires 和 Cache-Control: max-age，或 同时指定 Last-Modified 和 ETag。

这是正确的吗？如果是这样，我应该使用Expires 还是max-age？我想我对这两者都有一个大致的了解，但不知道通常最好使用哪个。

如果我还必须做Last-Modified 或ETag，其中哪一个？我想我得到了Last-Modified，但对这个ETag 概念仍然很模糊。

另外，我应该为哪些文件启用浏览器缓存？

Answer 1

这对吗？

是的，Expires 和 max-age 做同样的事情，但有两种不同的方式。 Last-Modified 和 Etag 也是如此

如果是这样，我应该这样做 expires 还是 max-age？

过期时间取决于用户时钟的准确性，因此它通常是一个糟糕的选择（因为大多数浏览器都支持 HTTP/1.1）。使用 max-age，告诉浏览器该文件在几秒钟内是有效的。例如，1 天的缓存将是：

缓存控制：max-age=86400

请注意，当 Cache-Control 和 Expires 都存在时，Cache-Control 优先。 read

如果我还必须执行 Last-Modified 或 ETag，其中哪一个？我想我得到了 Last-Modified

你说得对，Last-Modified 应该更好。虽然是时间，但它是由服务器发送的。因此，用户的时钟没有问题。这就是 Last-Modified 优于 Expires 的原因。 浏览器将上次请求文件时发送的 Last-Modified 发送给服务器，如果相同，则服务器以空响应“304 Not Modified”响应

另外，您必须注意 ETag 也很有用，因为 Last-Modified 的时间窗口为一秒。因此，您无法区分具有相同 Last-Modified 值的两个不同来源。 [2]

Etag 需要比 Last-Modified 更多的计算，因为它是文件当前状态的签名（类似于 md5 sum 或 CRC32）。

另外，我应该为哪些文件启用浏览器缓存？

所有文件都可以从缓存中受益。您有两种不同的方法：

• with max-age：适用于永不改变的文件（图像、CSS、javascript）。只要 max-age 值，浏览器就不会向服务器发送任何请求。因此，您会在第二次加载时看到页面加载速度非常快。如果您需要更新文件，只需附加一个问号和更改日期（例如 /image.png?20110602，或者为了更好的代理缓存，例如 /20110602/image.png 或 /image.20110602.png） .这样，您可以在紧急情况下使文件过期（请记住，一旦浏览器拥有 max-age 文件，浏览器几乎永远不会访问服务器）。主要用途是加快处理速度并限制发送到服务器的请求。
• with Last-Modified：可以在所有文件上设置（包括那些具有 max-age 的文件）。即使您有动态页面，您也可能暂时不会更改文件的内容（即使是 10 分钟），所以这可能很有用。这里的主要用途是告诉浏览器“不断询问我这个文件，如果它是新的，我会给你发新的”。因此，在每次页面加载时都会发送一个请求，但如果文件已经很好（304 Not Modified）则答案为空，因此您可以节省带宽。

您缓存的越多，页面显示的速度就越快。但是刷新缓存是一项艰巨的任务，因此请谨慎使用。

一个学习这一切的好地方，有很多解释：http://www.mnot.net/cache_docs/

[2]: rfc7232 Etag https://www.rfc-editor.org/rfc/rfc7232#section-2.3