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

Question

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

根据这个网站:

为所有可缓存资源指定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相同

如果是这样,我应该过期还是最大年龄？

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

缓存控制:max-age = 86400

需要注意的是当两个Cache-Control和Expires都存在,Cache-Control优先.读

如果我还要做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