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

Question

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

根据this site :

It is important to specify one of Expires or Cache-Control max-age, and one of Last-Modified or ETag, for all cacheable resources. It is redundant to specify both Expires and Cache-Control: max-age, or to specify both Last-Modified and ETag.

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

如果我还必须执行 Last-Modified 或 ETag，请选择哪一个？我想我得到了 Last-Modified 但我对这个 ETag 概念仍然非常模糊。

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

Answer 1

Is this correct?

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

If so, should I do expires or max-age?

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

缓存控制:max-age=86400

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

If I have to also do Last-Modified or ETag, which one of those? I think I get Last-Modified

你是对的，Last-Modified 应该更好。虽然是时间，但是是服务器发送的。因此用户的时钟没有问题。这就是 Last-Modified 比 Expires 更好的原因。 浏览器发送服务器上次请求文件时发送的Last-Modified，如果相同，服务器会返回一个空响应“304 Not Modified”

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

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

Also, which files should I enable browser caching for?

所有文件都有利于缓存。您有两种不同的方法:

• 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 未修改)，则答案为空，因此可以节省带宽。

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

这是一个学习所有这些内容的好地方，有很多解释:http://www.mnot.net/cache_docs/

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