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

Question

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

根据this site：

  

指定Expires或Cache-Control max-age之一很重要，   和Last-Modified或ETag之一，用于所有可缓存资源。它是   冗余以指定Expires和Cache-Control：max-age或to   指定Last-Modified和ETag。

这是对的吗？如果是，我应该使用Expires还是max-age？我想我大致了解这两者是什么，但不知道哪些通常最好用。

如果我还要Last-Modified或ETag，那么哪一个？我想我得到Last-Modified，但在这个ETag概念上仍然非常模糊。

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

Answer 1

  

这是对的吗？

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

相同

  

如果是的话，我应该这样做   到期还是最大年龄？

过期取决于用户时钟的准确性，因此它通常是一个糟糕的选择（因为大多数浏览器都支持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://tools.ietf.org/html/rfc7232#section-2.3