所以,我们如何才能兼得鱼和熊掌:客户端缓存和快速更新?
很简单,我们可以在资源内容更新时改变资源的URL来强制用户下载最新的响应。典型地:可以通过在文件名上嵌入文件的指纹码,或者版本号来实现——比如 styoe.x234dff.css。
能够定义单个资源级别的缓存策略让我们能够定义“缓存层级”,这让我们不但能够控制缓存有效的时间,而且还能控制新的版本何时能被访问者看到。例如,我们一起分析一下上面的例子:
- HTML被标记成“no-cache”,这意味着浏览器在每个请求时都会重新验证文档,当内容更新后会获取最新版本。同时,在HTML标记中,我们给CSS和JavaScript资源嵌入指纹码:如果这些文件的内容发生变化,页面的HTML也会随着变化,那么新的HTML响应就会被下载。
- CSS允许被浏览器和中继缓存(比如CDN)缓存,并且过期时间设置成1年。注意我们可以安全地将过期时间设置成1年,因为我们在文件名中使用了指纹码:如果CSS更新了,那么URL也会被更新。
- JavaScript也被设置成一年过期,但是它被标记成私有的,也许是因为它包含了一些私有的用户数据,这些不应该被CDN缓存。
- 图片被缓存而不包含版本信息和唯一的指纹码,过期时间为1天。
结合使用ETag,Cache-Control,和唯一的URL允许我们提供最佳的方案:长久的过期时间,控制哪些响应可以被缓存,同时按需更新。
缓存备忘录
没有一个固定的最佳缓存策略。你要根据你的通信模式,服务的数据类型,和应用特定的数据刷新需求等来定义和配置最合适的单个资源级别的设置,以及整体的“缓存层级”。
在定义缓存策略时使用的一些技巧和技术:
- 使用一致的URL:如果你对相同的内容使用不同的URL,那么这些内容将会获取和存储多次。提示:注意URL是大小写敏感的!
- 确保服务器提供有效的令牌(ETag):验证令牌消除了当服务器端文件没有更改时传输相同数据的情况。
- 定义哪些资源可以被中继缓存:那些对于所有用户都一样的响应很适合缓存于CDN或其他中继缓存。
- 对每个资源定义最优的缓存周期:不同的资源可能有不同的刷新需求。为每一个资源审查并确定合适的max-age。
- 为你的网站定义最佳的缓存层级:对HTML文档结合使用带有内容指纹码的资源URL和短时间或no-cache生命周期,能够允许你控制客户端合适获取最新的更新。
- 最小化搅动(chrun):有些资源比其他的更新频繁。如果有一些特定的资源(比如JavaScript函数,或者一组CSS样式)会经常更新,考虑将他们提取到单独文件。这样做可以让其他的内容(比如那些不太更新的库文件)可以从缓存中读取,从而当内容更新时最小化需要下载的内容。
原文链接: web fundamentals 翻译: 伯乐在线 - 陈鑫伟 译文链接: http://blog.jobbole.com/69790/ |