性能研究(二): 浏览器缓存的用法

这篇译文本来应该上月放上来的，可惜一直没有翻译完结尾，原文链接 http://yuiblog.com/blog/2007/01/04/performance-research-part-2/。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝废话分隔线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

这是关于优化网页性能系列的第二篇文章，你可能会奇怪为什么会在 YUI Blog 看到关于性能的文章，这证明了其实大多数网页性能是受前端影响的，就是说 UI 的设计和开发。

在上一篇文章里，我讲述了二八原则对减少HTTP请求数的提示。浏览器会花费 80% 的时间去装载包括脚本，样式表和图片等外部组件，减少 HTTP 请求数能最大限度地减少响应时间，但为什么不总是把所有组件都保存到浏览器缓存呢？

为什么浏览器缓存会有问题？

区分空缓存和满缓存状态下页面浏览的用户体验是非常重要的。空缓存是指浏览器绕过磁盘缓存并且要请求页面上所有的组件，满缓存是指所有或者绝大部分组件能够在磁盘缓存中找到从而避免发起相应的 HTTP 请求。

空缓存的主要原因是由于浏览者第一次访问该页面，浏览器必须下载页面上所有的组件，而其它原因包括：

浏览者已访问过该页面，但清除了浏览器缓存。
浏览器设置了自动清除浏览器缓存。
浏览器绕过浏览器缓存来重新载入页面。例如，你可以在 Internet Explorer 下通过 [Ctrl]+[Shift]+[F5] 来绕过缓存刷新页面。

无论是空缓存或满缓存，都可以使用合拼 JS 脚本，样式表或图片的方式来减少 HTTP 请求数，而设置一个较大期限的失效 HTTP 头（如 Expires: Sat, 01 Nov 2019 00:00:00 GMT）给组件也可以减少 HTTP 请求，但仅适用在满缓存的页面浏览中。

早前我们讨论过到当用户以空缓存方式访问 http://www.yahoo.com 的时间消耗，浏览器会下载大约 30 个组件（图一），图二是以满缓存方式装载 http://www.yahoo.com 的时间消耗图表，每一条横条代表浏览器载入的一个组件。当以满缓存浏览页面时，若组件已存在于浏览器缓存中并设置了一个将来的时间为失效时间，浏览器仅下载了 3 个组件。

图一：空缓存方式装载 http://www.yahoo.com

图二：满缓存方式装载 http://www.yahoo.com

表一列出装载 http://www.yahoo.com 时各种组件类型的总大小和请求数，满缓存给用户带来了多少好处呢？在我家里的宽带网络载入该页面，空缓存时需要 2.4 秒，而满缓存时仅需要 0.9 秒，而且减少了 90% 的 HTTP 请求数和 83% 的数据下载量。

表一：空缓存和满缓存装载http://www.yahoo.com的对比

* 测试环境为 cable modem (~2.5 mbps)

有多少用户在访问Yahoo!页面时会使用满缓存？

Yahoo! 的性能小组通过一项实验来检测在 Yahoo! 最活跃的页面上使用空缓存的用户和页面浏览数比例。我们设计了这个实验来测量用户关于新组件（一个图片）的浏览器缓存行为，我们每天对于这个新图片作出下面的统计数据：

请求这个新图片的用户比例？
请求这个新图片的页面访问数比例？

这个新图片设置了以下 HTTP 头：

Expires: Thu, 15 Apr 2004 20:00:00 GMT
Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT

当组件被浏览器保存到缓存时，当时会保存 Expires （失效时间）和 Last-Modified （最后修改时间）的值。如果指定一个过去了的时间作为失效时间，将导致浏览器每次访问都会请求这个图片（也有例外，比如用户点击浏览器上的 [后退] 的按钮返回上一页）。如果图片已经被缓存且被重新请求时，浏览器会把 Last-Modified 加入到 HTTP 请求头。这被称为有条件的 GET 请求，如果这个图片没有被修改，服务器会返回一个 304 Not Modified 的响应。请求来自浏览器，因而，响应状态码会有下面其中一种结果：

200 - 图片不在浏览器缓存
304 - 图片在浏览器缓存中，但需要比较最后修改时间

响应状态码会记录在 Apache 的访问日志中，我们可以从中分析出空缓存和满缓存的比例。

使用空缓存访问的用户比例：

至少发起一次 200 请求的唯一用户数

唯一用户总数

使用空缓存访问的页面浏览比例：

200 请求数

200 请求数 + 304 请求数

图三显示出本次实验中使用空缓存访问的用户及页面浏览数的比例。在实验第一天，用户的浏览器中都不存在该图片的缓存，因此空缓存比例是 100%。在此之后，很多用户都缓存了该图片，空缓存比例会下降到了一个稳定的水平。

图三：使用空缓存的用户及页面浏览比例

惊人的结果

40-60% 的 Yahoo! 用户以及约 20% 的页面浏览使用了空缓存。据我所知，目前还没有其它关于这方面信息的研究。我不知道你怎样认为，但这个结果的确使我们很吃惊。它表明了即使你做了最大缓存优化，仍然有大量的用户总是使用空缓存，这又回到我们上一篇文章提到的减少 HTTP 请求数能最有效地减少页面响应时间。使用空缓存的用户比例在不同的页面中可能会有所不同，尤其是有大量活跃用户的页面，然而，我们发现了以往并不在意到的使用行为，使用空缓存的页面浏览比例总约占 20%。

结论：记住空缓存的用户体验，它可能比你想象中更加普及。