【翻译】性能探索（2）--浏览器缓存的使用情况

在前一篇文章中，我讲述了关于减少HTTP请求，80-20法则告诉我们什么，浏览器花费了80%的时间去获取包括脚本、样式和图片在内的一些组件，减少HTTP请求的次数对于减少响应时间有着最大的影响，但是不应该所有的东西都保存在缓存中吧？

为什么缓存重要

区分空缓存的用户体验和全缓存的用户体验是很重要的。“空缓存”意味着浏览器绕过本地缓存而请求所有组件。“全缓存”意思是页面所有（至少大部分）组件已经在缓存中了，没有必要再发送HTTP请求去获取了（相应的HTTP请求避免了）。

“空缓存”的主要原因是用户第一次访问站点，浏览器必须要下载页面的组件，其他原因有：

• 用户以前虽然访问过该站点，但是已经清除了浏览器缓存
• 用户将浏览器设置为自动清除缓存
• 用户在刷新页面的时候使用特定的方法使得浏览器跳过了缓存，比如当你在刷新的时候同时按下Ctr键的时候，浏览器将跳过缓存，发送HTTP请求从服务器下载组件。

合并脚本，样式，图片等一些策略将会减少HTTP请求的次数（对空缓存和全缓存都有用），在一些组件的头文件中设置过期时间也会减少HTTP请求的次数（这个只对全缓存状态起作用）。

前面我们观察了当用户在空缓存状态下访问Http://www/yahoo.com所花费的时间，当用户访问页面市，浏览器下载了将近30个组件（图1），图2显示了在全缓存状态下用户访问Http://www/yahoo.com所花时间的情况，图中每一条代表了浏览器请求的一个特定组件，在全缓存状态下，大部分组件已经在缓存中了，所以浏览器只需要下载包括HTML在内的3个组件。

图1 在空缓存的状态下打开雅虎主页

图2 在全缓存的状态下打开雅虎主页

图3显示了一个关于当访问Http://www/yahoo.com时请求每个组件的大小和数量的汇总，用户将从全缓存中得到多少好处？在我家里面访问Http://www/yahoo.com，空缓存状态下需要2.4秒，而全缓存状态下只需要0.9秒，全缓存比空缓存减少了90%的HTTP请求、83%的数据流量。

图3

多少用户是在全缓存的状态下访问Yahoo！的呢？

雅虎的性能团队做了一个关于有多少比例的用户和页面在空调缓存状态下访问雅虎页面的实验。我们实验是通过分析用户对于一个组件（一个新的图片）的缓存情况来展开的。对于这个新的图片我们做了以下的统计：

1. 有多少比例的用户在访问这个图片？
2. 有多少比例的页面在访问这个图片？

这个新的图片HTTP头信息被设置为：

Expires（过期时间）: Thu, 15 Apr 2004 20:00:00 GMT

Last-Modified（上次修改时间）: Wed, 28 Sep 2006 23:49:57 GMT

当浏览器保存一个页面组件的时间，同时也保存了这个组件的过期时间和上次修改时间（HTTP头）。设置过期时间会强迫浏览器在访问页面的时候去请求图片，如果图片已经在缓存中，并且正在被重新请求，浏览器会把最后修改时间加入在HTTP头中，这就是传统的GET请求，如果图片没有被修改，服务器会返回一个304代码，所以对于浏览器的请求服务器会返回下面的两种代码：

1. 200--浏览器没有缓存。
2. 304--浏览器已经缓存了图片，但是需要验证最后修改时间

因为浏览器请求的返回状态是可以被记录的，所以我们是可以通过分析日志来检测空缓存和全缓存。

图4显示了用户和页面在空缓存的状态的下访问所占的比例，在实验的第一天，没有用户有这个图片的缓存，所以空缓存占据100%，随着时间的推移，更多的用户拥有了这个图片的缓存，所以空缓存的比例开始下降一直到一个平稳的状态。

图4

奇怪的结果

　　40%--60%的Yahoo!用户是空缓存的，20%的页面访问是在空缓存的情况下进行，据我所知，目前还没有其他的研究来说明这个事情，我不知道你是怎么认为的，但是我们的实验结果给了我一个大的惊奇。尽管你最大限度的使用了缓存，但是还是有很大数量的用户是在空缓存状态下的，这个又回到前一篇文章的话题“减少HTTP请求对于减少响应时间有最大的影响”，对于不同的网页，没有缓存的用户的比例是不同的，尤其对于那些有着大量活跃用户的页面。在我的学习中发现，不管如何使用缓存，至少有20%的时间页面是空缓存的状态下被访问的。

结论

　　结论：始终要考虑空缓存的用户体验，空缓存要比你想象的普遍很多。

原文链接：Performance Research, Part 2: Browser Cache Usage – Exposed!