浏览器缓存使用

前言：

这是一系列文章中的第二篇，这些文章描述了为了解更多优化网页性能而进行的实验。您可能想知道为什么要阅读YUI博客上的性能文章。事实证明，大多数网页性能都受前端工程，即用户界面设计和开发的影响。

在之前的文章中，我描述了80/20规则告诉我们有关减少HTTP请求的内容。由于浏览器花费80％的时间来获取外部组件，包括脚本，样式表和图像，因此减少HTTP请求的数量对减少响应时间的影响最大。但是不应该把所有内容保存在浏览器的缓存中吗？

为什么缓存很重要？
YUI博客发展性能研究，第2部分：浏览器缓存使用 - 暴露！
性能研究，第2部分：浏览器缓存使用 - 暴露！

由YUI队
2007年1月4日
这是一系列文章中的第二篇，这些文章描述了为了解更多优化网页性能而进行的实验。您可能想知道为什么要阅读YUI博客上的性能文章。事实证明，大多数网页性能都受前端工程，即用户界面设计和开发的影响。

在之前的文章中，我描述了80/20规则告诉我们有关减少HTTP请求的内容。由于浏览器花费80％的时间来获取外部组件，包括脚本，样式表和图像，因此减少HTTP请求的数量对减少响应时间的影响最大。但是不应该把所有内容保存在浏览器的缓存中吗？

为什么缓存很重要？
区分空白页面视图和完整缓存页面视图的最终用户体验非常重要。“空缓存”表示浏览器绕过磁盘缓存，并且必须请求所有组件加载页面。“完全缓存”意味着在磁盘高速缓存中找到所有（或至少大多数）组件，并且避免相应的HTTP请求。

空缓存页面视图的主要原因是因为用户第一次访问该页面，并且浏览器必须下载所有组件以加载页面。其他原因包括：

用户先前访问了该页面，但清除了浏览器缓存。
根据浏览器的设置自动清除浏览器缓存。
用户以导致绕过高速缓存的方式重新加载页面。例如，如果在单击Internet Explorer中的“刷新”按钮的同时按住control-shift键，浏览器将绕过缓存。
战略，如结合脚本，样式表，或图片减少HTTP请求的数量都空和满的缓存页面浏览。将组件配置为具有将来日期的Expires标头会减少仅对完整缓存页面视图的HTTP请求数。

以前，我们观察了当用户使用空缓存请求http://www.yahoo.com时花费的时间。当用户加载页面时，浏览器会下载大约30个组件（参见图1）。图2是使用完整缓存加载http://www.yahoo.com所花费的时间的图形视图。每个条形表示浏览器请求的特定组件。由于组件已在完整缓存页面视图的缓存中，并且Expires标头将来有日期，因此浏览器只需下载三个组件，包括HTML文档

图1.使用空缓存加载http://www.yahoo.com

图2.使用完整缓存加载http://www.yahoo.com

表1显示了加载http://www.yahoo.com的每种类型组件的总大小和请求数的摘要。完整缓存对用户有多大益处？在家中通过我的电缆调制解调器加载页面时，空缓存需要2.4秒，完全缓存只需0.9秒。与空缓存页面视图相比，完整缓存页面视图的HTTP请求减少了90％，下载的字节数减少了83％。

表1.要加载的空和完整缓存摘要http://www.yahoo.com

*时间是通过电缆调制解调器测量的（~2.5 mbps）。

有多少用户查看Yahoo! 具有完整缓存的页面？
Yahoo!的表现团队 在一些雅虎最热门的网页上进行了一项实验，以确定用户和网页浏览量的百分比。我们将实验定义为测量与新组件（图像）相关的用户缓存行为。对于这个新图像，我们每天测量以下统计数据：

有多少用户请求了新图片？
有多少百分比的网页浏览量请求新图片？
新映像配置了以下HTTP标头：

到期日：2004年4月15日星期四20:00:00 GMT
最后修改日期：2006年9月28日星期三23:49:57 GMT
当浏览器将组件保存在其缓存中时，它还会保存Expires和Last Modified值。指定过去的过期日期会强制浏览器在每次查看页面时请求图像（除了少数例外，例如当用户单击浏览器的“后退”按钮返回页面时）。如果图像已经在浏览器的缓存中并且正在重新请求，则浏览器将在请求标头中传递Last-Modified日期。这称为条件GET请求，如果图像尚未修改，服务器将返回304 Not Modified响应。因此，来自浏览器的请求会产生以下响应状态代码之一：

200 - 浏览器的缓存中没有图像。
304 - 浏览器在其缓存中有图像，但需要验证上次修改日期。
由于状态代码记录在apache访问日志中，因此我们可以通过分析日志来确定空缓存和完整缓存测量。

具有空缓存的用户百分比为：

   具有至少一个200响应的唯一用户数 
                                                    
                唯一身份用户总数             

具有空缓存的页面视图的百分比为：

                  ＃200个回复           
                                               
       ＃200个回复+ 304个回复 

图3显示了在实验的每一天绘制空缓存的用户和页面视图的百分比。在实验的第一天，没有人将这些图像缓存，因此空缓存百分比为100％。随着时间的推移，越来越多的用户将图像缓存，因此百分比下降，直到某个时刻达到稳定状态。

图3.具有空缓存的用户和页面视图的百分比
惊人的结果
40％至60％的雅虎用户拥有空的缓存体验，所有页面浏览量中约有20％是使用空缓存完成的。据我所知，没有其他研究显示这种信息。我不知道你怎么想，但这些结果出来给我们一个很大的惊喜。它表示，即使您的资产针对最大缓存进行了优化，也会有大量用户始终拥有空缓存。这可以追溯到早先的一点，即减少HTTP请求的数量是最大的减少响应时间的影响。具有不同网页的空缓存的用户百分比可能会有所不同，尤其是对于具有大量活动（每日）用户的页面。但是，我们在研究中发现，无论使用模式如何，具有空缓存的页面查看百分比总是约为20％。

结论：请记住空缓存用户体验。它可能比你想象的更普遍！

本文翻译与: https://yuiblog.com/blog/2007/01/04/performance-research-part-2/