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

时间:2011-05-01 21:57:17

标签: caching browser

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

根据this site

  

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

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

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

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

1 个答案:

答案 0 :(得分:69)

  

这是对的吗?

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

相同
  

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

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

缓存控制:max-age = 86400

请注意,当Cache-ControlExpires都存在时,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