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

Posted

技术标签:

【中文标题】利用浏览器缓存 - expires 或 max-age, last-modified 或 etag【英文标题】:leverage browser caching - expires or max-age, last-modified or etag 【发布时间】:2011-08-16 15:23:36 【问题描述】:

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

根据this site:

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

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

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

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

【问题讨论】:

【参考方案1】:

这对吗?

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

如果是这样,我应该这样做 expires 还是 max-age?

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

【讨论】:

感谢您提供该解释。但是,我仍然很难了解如何实际实施您对 max-age 和 last-modified 的建议。我在哪里可以找到一些我会在我的 htaccess 中为这些代码放入的实际代码示例?我需要列出每张图片吗?我想我基本上理解了这里的概念,但需要更明确的帮助来了解这在 htaccess 中会是什么样子。 查看 Apache 手册中的示例:httpd.apache.org/docs/2.3/fr/mod/mod_expires.html (Module Expires)。例如:ExpiresByType image/gif M604800 将在 GIF 图片在其自身修改时间后 7 天 (7*86400) 后过期。您会在同一页面上找到许多其他示例。 Last-Modified 也可能会发送,但我不使用 Apache,因此我没有对此进行测试。 Apache url 已损坏,但仍存在于 archive.org 中:(fr) web.archive.org/web/20120418030430/http://httpd.apache.org/docs/… 或 web.archive.org/web/20120418030430/http://httpd.apache.org/docs/… (en) 添加永久链接(无版本,但目前为 2.4):httpd.apache.org/docs/current/mod/mod_expires.html

以上是关于利用浏览器缓存 - expires 或 max-age, last-modified 或 etag的主要内容,如果未能解决你的问题,请参考以下文章

图解浏览器缓存

nginx优化:使用expires在浏览器端缓存静态文件

前端性能优化 —— 添加Expires头

如何利用 .woff 字体的浏览器缓存?

http缓存

nginx实战2---浏览器设置缓存