[WebKit]管好页面缓存

布满荆棘的人生 2022-08-25 05:18 143阅读 0赞

*“最快的网络请求就是不发请求。”*

无论何时有人说到这句话，我都会心一笑。这的确是真理，HTTP Cache对网页速度至关重要。

现在缓存的使用看似正渐入佳境，但还不够。下面HTTP Archive的数据显示在过去一年里(2011),  缓存的资源增加了10%，而同时页面资源却增加了12%，页面数据量增加了24%([LINK][])

![SouthEast][]

推动缓存的应用涉及很多方面，无法加以明确具体的进度。唯一所能明确的是应用缓存是我们必然的选择。

下面是收集到的一些比较明显的缓存问题，可以帮助我们了解下一步要做些什么:

*  55%的资源没有指定Max-Age
 *  没有指定Max-Age的资源中有46%的资源在2周内并没有变化过。
 *  许多常用的页面资源仅允许缓存一两个小时。
 *  40-60%的页面访问者并没有对应的缓存。
 *  30%的页面用户有页面的完整缓存可用。
 *  用户平均需要花4小时的浏览时间才能拥有页面的完整缓存。

## **Max-Age的分布** ##

在以前就提到缓存的一些空间限制的问题，缺少足够HTTP请求头的Bug, 以及过期淘汰算法的问题。可是一些页面并未指定缓存的headers，比如在响应中指定Max-Age。下面的例子指定资源可以缓存一年:

*Cache-Control: max-age=31536000*

你既然读了这篇博客，那你很可能已经开始运用max-age了。不过下面这分HTTP Archive的图表显示55% 的资源并未指定Max-Age，也就是平均页面资源数是81个，其中有45个资源会被反复请求。

![SouthEast 1][]

## **没有使用缓存并非'有意为之'** ##

为什么55%的资源没有指定缓存信息？很可能是页面开发者缺少使用缓存的意识，认为自己的太简单，不需要使用缓存。另一种情况是很多资源是动态的(JSON, ads, beacons, …)所以无法缓存。HTTP Archieve同样相应的统计。

HTTP Achieve会在每月的1日和15日分析世界近Top 50K个页面，并记录每个资源的HTTP headers。我们可以使用这些数据来观察缓存的变化情况。上面说到有55%无法缓存的资源是出自2012年2月15日的数据，下图则显示这些资源在近两周(2月1日)及一个月(1月15日)中的变化情况:(HTTP Archive没有保存数据体，所以这些数据的唯一性是通过相同的URL, Last-Modified, ETag及Content-Length这些字段来标识的。)

![SouthEast 2][]

**没有指定max-age的资源中有46%超过2周没有变化过，**也就是说平均每页本来可以有21个子资源是不需要的发起网络请求。另外38%的资源超过一个月没有变过，相当于平均每个页面17个这样的子资源。

可以看到这里的确有许多不必要的HTTP数据请求。个人认为这绝不是故意的，而是缺少使用缓存的意识。下面这个数据可以证明这一点，它显示出所有资源(包含所有可缓存的和不可缓存的资源)在2012年2月15日前近一年内未变化的情况。

![SouthEast 3][]

可以看到无论是全部资源，或是未支持缓存的资源中，其中在2周及1月内未变化的比例十分相近(分别是44% vs. 46%, 及35% vs. 38%)。

\*译注:下面是www.sina.com.cn的最近一年(2014/2/1)支持缓存资源的占比。:

![SouthEast 4][]

以及缓存生命周期的分布:

![SouthEast 5][]

对比相应的网络流量的变化情况:

![SouthEast 6][]

可以看到缓存支持最高(81%)时，网络请求数及流量处于最低值(710kB)。

## **第三方内容** ##

如果一个页面没有很好地支持缓存，只会影响他们的页面和用户。但如果一个第三方的内容开发者未能提供良好的缓存支持，就会影响到所有使用它的网页。反之，应用了较好的缓存支持，就可以大幅提升性能。

下面是HTTP Archive统计出的最常使用的30个第三方资源，以及它们的max-age值。

*  [http://www.google-analytics.com/ga.js][http_www.google-analytics.com_ga.js] (2 hours)
 *  [http://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite2.png][http_ssl.gstatic.com_s2_oz_images_stars_po_Publisher_sprite2.png] (8760 hours)
 *  [http://pagead2.googlesyndication.com/pagead/js/r20120208/r20110914/show\_ads\_impl.js][http_pagead2.googlesyndication.com_pagead_js_r20120208_r20110914_show_ads_impl.js] (336 hours)
 *  [http://pagead2.googlesyndication.com/pagead/render\_ads.js][http_pagead2.googlesyndication.com_pagead_render_ads.js] (336 hours)
 *  [http://pagead2.googlesyndication.com/pagead/show\_ads.js][http_pagead2.googlesyndication.com_pagead_show_ads.js] (1 hour)
 *  [https://apis.google.com/\_/apps-static/\_/js/gapi/gcm\_ppb,googleapis\_client,plusone/\[...\]][https_apis.google.com_apps-static_js_gapi_gcm_ppb_googleapis_client_plusone_...] (720 hours)
 *  [http://pagead2.googlesyndication.com/pagead/osd.js][http_pagead2.googlesyndication.com_pagead_osd.js] (24 hours)
 *  [http://pagead2.googlesyndication.com/pagead/expansion\_embed.js][http_pagead2.googlesyndication.com_pagead_expansion_embed.js] (24 hours)
 *  [https://apis.google.com/js/plusone.js][https_apis.google.com_js_plusone.js] (1 hour)
 *  [http://googleads.g.doubleclick.net/pagead/drt/s?safe=on][http_googleads.g.doubleclick.net_pagead_drt_s_safe_on] (1 hour)
 *  [http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png][http_static.ak.fbcdn.net_rsrc.php_v1_y7_r_ql9vukDCc4R.png] (3825 hours)
 *  [http://connect.facebook.net/rsrc.php/v1/yQ/r/f3KaqM7xIBg.swf][http_connect.facebook.net_rsrc.php_v1_yQ_r_f3KaqM7xIBg.swf] (164 hours)
 *  [https://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite2.png][https_ssl.gstatic.com_s2_oz_images_stars_po_Publisher_sprite2.png] (8760 hours)
 *  [https://apis.google.com/\_/apps-static/\_/js/gapi/googleapis\_client,iframes\_styles\[...\]][https_apis.google.com_apps-static_js_gapi_googleapis_client_iframes_styles_...] (720 hours)
 *  [http://static.ak.fbcdn.net/rsrc.php/v1/yv/r/ZSM9MGjuEiO.js][http_static.ak.fbcdn.net_rsrc.php_v1_yv_r_ZSM9MGjuEiO.js] (8742 hours)
 *  [http://static.ak.fbcdn.net/rsrc.php/v1/yx/r/qP7Pvs6bhpP.js][http_static.ak.fbcdn.net_rsrc.php_v1_yx_r_qP7Pvs6bhpP.js] (8699 hours)
 *  [https://plusone.google.com/\_/apps-static/\_/ss/plusone/\[...\]][https_plusone.google.com_apps-static_ss_plusone_...] (720 hours)
 *  [http://b.scorecardresearch.com/beacon.js][http_b.scorecardresearch.com_beacon.js] (336 hours)
 *  [http://static.ak.fbcdn.net/rsrc.php/v1/yx/r/lP\_Rtwh3P-S.css][http_static.ak.fbcdn.net_rsrc.php_v1_yx_r_lP_Rtwh3P-S.css] (8710 hours)
 *  [http://static.ak.fbcdn.net/rsrc.php/v1/yA/r/TSn6F7aukNQ.js][http_static.ak.fbcdn.net_rsrc.php_v1_yA_r_TSn6F7aukNQ.js] (8760 hours)
 *  [http://static.ak.fbcdn.net/rsrc.php/v1/yk/r/Wm4bpxemaRU.js][http_static.ak.fbcdn.net_rsrc.php_v1_yk_r_Wm4bpxemaRU.js] (8702 hours)
 *  [http://static.ak.fbcdn.net/rsrc.php/v1/yZ/r/TtnIy6IhDUq.js][http_static.ak.fbcdn.net_rsrc.php_v1_yZ_r_TtnIy6IhDUq.js] (8699 hours)
 *  [http://static.ak.fbcdn.net/rsrc.php/v1/yy/r/0wf7ewMoKC2.css][http_static.ak.fbcdn.net_rsrc.php_v1_yy_r_0wf7ewMoKC2.css] (8699 hours)
 *  [http://static.ak.fbcdn.net/rsrc.php/v1/yO/r/H0ip1JFN\_jB.js][http_static.ak.fbcdn.net_rsrc.php_v1_yO_r_H0ip1JFN_jB.js] (8760 hours)
 *  [http://platform.twitter.com/widgets/hub.1329256447.html][http_platform.twitter.com_widgets_hub.1329256447.html] (87659 hours)
 *  [http://static.ak.fbcdn.net/rsrc.php/v1/yv/r/T9SYP2crSuG.png][http_static.ak.fbcdn.net_rsrc.php_v1_yv_r_T9SYP2crSuG.png] (8699 hours)
 *  [http://platform.twitter.com/widgets.js][http_platform.twitter.com_widgets.js] (1 hour)
 *  [https://plusone.google.com/\_/apps-static/\_/js/plusone/\[...\]][https_plusone.google.com_apps-static_js_plusone_...] (720 hours)
 *  [http://pagead2.googlesyndication.com/pagead/js/graphics.js][http_pagead2.googlesyndication.com_pagead_js_graphics.js] (24 hours)
 *  [http://s0.2mdn.net/879366/flashwrite\_1\_2.js][http_s0.2mdn.net_879366_flashwrite_1_2.js] (720 hours)

其中有些有趣的发现**.**

*  *简单的URLs有着较短的缓存时间 *– 一些资源时间特别短，它们常常是在粘贴到页面中的一个片段。短的缓存时间有利于解决一些紧急的问题。
 *  *较长的URLs有着同样较长的缓存时间 *– 许多第三方bootstrap脚本会动态地加载其它资源，他们所生成的URLs一般都比较长，里面含有一些唯一标识符。如果出现了紧急问题，负责加载的脚本会被修改支加载不同URL的资源，这样就不需要对应更新那些资源了。
 *  *Facebook中点赞按钮去哪了****?*** – Facebook的like.php和likebox.php是经常被使用的，但没有出现在上面的列表里。原因是不同的页面下会有一个唯一标识，从而降低了总体的占比。相比于那些负责加载的脚本，它们有着更为激进的过期策略，如no-cache, no-store, must-revalidate。
 *  *拥有较短缓存时间的资源通常是异步的 *– 为那些bootstrap脚本指定较短的缓存时间有利于应对紧急状况，但会因为发送条件更新(Conditional GET)请求而影响性能。幸运地是一些第三方资源开发者已经意识到这个问题，并提供了异步的方式来加载这些脚本，以减少较短的缓存时间带来的影响。

常用的第三方资源通常有不错的表现，但当我们考察更多的资源时，就可以发现这里相当的提升空间。

## **缓存容量不足 ** ##

根据2007年的一项实验([experiment][]) 40%-60%的用户没有所浏览页面的缓存，其中20%的浏览页面没有本地缓存。

![SouthEast 7][]

缺少足够缓存的原因很多，我认为其中最重要的原因是过小的缓存容量。下面是我在我自己的设备测试的数据(一些浏览器的缓存大小会基于可用磁盘空间计算，而我的磁盘是250GB,其中54GB可用。):

*  Chrome:[320][][MB][]
 *  Internet Explorer 9:[250 MB][]
 *  Firefox 11: 830 MB (about:cache)
 *  Opera 11: 20 MB (Preferences | Advanced | History)
 *  iPhone 4, iOS 5**.**1: 30-35 MB (基于测试)
 *  Galaxy Nexus: 18 MB (基于测试)

除了Firefox 11比较接近我期望的大小，其它的都太小了。一部钢铁侠2也有1.82GB了，根本不够用。(让浏览器中缓存多媒体文件!!!!!)。

## **现实的缓存状况 ** ##

为了提供让浏览增加缓存容量的依据，必须要获取真实用户的统计数据。为此参与Velocity Summit的各家浏览器团队一起完成了一项课题 。特别推荐[Will Chan][]的提交的这篇[Chromium cache metrics][MB]，里面列出了一些非常有价值的缓存数据。

主要数据有:

*  **近30%用户的缓存完整**(320 MB)
 *  **对于缓存满的用户，他们平均要花4小的浏览时间(约20小时)才会拥有完整的缓存**
 *  7%的用户至少一周清一次缓存
 *  19%用户会一周经历一次"缓存损坏"的错误，然后清掉他们的缓存

最后一项关于缓存损坏的统计非常有趣，我非常欣赏这样的坦率。IE9团队有着相似的数据([something similar][250 MB])**.** IE 7&8 将缓存容量限制在50MB, 因为基于测试当时发现超过50MB并没有提升缓存命中率。而IE9中，他们终于知道更大的缓存容量的确可以改善缓存命中率:

*In IE9, we took a much closer look at our cache behaviors to better understand our surprising finding that larger caches were rarely improving our hit rate****.*** *We found a number of functional problems related to what IE treats as cacheable and how the cache cleanup algorithm works****.*** *After fixing these issues, we found larger cache sizes were again resulting in better hit rates, and as a result, we’ve changed our default cache size algorithm to provide a larger default cache****.***

Will也认识到Chrome的320MB缓存限制需要更新。对于拥有完整缓存的用户而言，30%的比例有些偏低。不过用户也许只对少量的页面比较活跃，比如是只看看Gmail和Facebook。建议加一下针对活跃度的统计。很可能一个用户常常浏览大量的网页，虽然拥有满满的缓存，却体验着低效的页面加载时间。

## **下一步 ** ##

浏览器开发者对于改进缓存责无旁贷。**1)**提升缓存容量就是改进之一，特别是对于移动设备。**2)**需要提供和缓存容量及用户行为相关的数据。**3)**更加有效的淘汰算法(比如[IE 9′s prioritization based on mime type ][250 MB])。 **4)**更加关注个性化，当用户访问常用页面可以得到更快的体验。

转载请注明出处: [http://blog.csdn.net/horkychen][http_blog.csdn.net_horkychen]

原文地址: [Cache them if you can][]

参考: <<[HTTP缓存][HTTP]>>

[LINK]: http://httparchive.org/trends.php?s=intersection&minlabel=Feb+11+2011&maxlabel=Feb+15+2012#bytesTotal&reqTotal
[SouthEast]: /images/20220824/258f5d3e42d74034a8053a86bbc58dc0.png
[SouthEast 1]: /images/20220824/b45fabbd980640b1beb337543b6d7998.png
[SouthEast 2]: /images/20220824/d6f4941c530042499ab762fc3276c584.png
[SouthEast 3]: /images/20220824/d077aed7e6e548a3bbe07ad723671edc.png
[SouthEast 4]: /images/20220824/618859276e844fda88b8abfe95562839.png
[SouthEast 5]: /images/20220824/fb5e701ab5dc42d891f8e63778f22f3a.png
[SouthEast 6]: /images/20220824/28f76be86cd6404c9a2b95b32b386e76.png
[http_www.google-analytics.com_ga.js]: http://www.google-analytics.com/ga.js
[http_ssl.gstatic.com_s2_oz_images_stars_po_Publisher_sprite2.png]: http://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite2.png
[http_pagead2.googlesyndication.com_pagead_js_r20120208_r20110914_show_ads_impl.js]: http://pagead2.googlesyndication.com/pagead/js/r20120208/r20110914/show_ads_impl.js
[http_pagead2.googlesyndication.com_pagead_render_ads.js]: http://pagead2.googlesyndication.com/pagead/render_ads.js
[http_pagead2.googlesyndication.com_pagead_show_ads.js]: http://pagead2.googlesyndication.com/pagead/show_ads.js
[https_apis.google.com_apps-static_js_gapi_gcm_ppb_googleapis_client_plusone_...]: https://apis.google.com/_/apps-static/_/js/gapi/gcm_ppb,googleapis_client,plusone/rt=j/ver=DD_ff52ufs8.en_US./sv=1/am=!RERB5bJyvtSIVCfJNg/d=1/cb=gapi.loaded0
[http_pagead2.googlesyndication.com_pagead_osd.js]: http://pagead2.googlesyndication.com/pagead/osd.js
[http_pagead2.googlesyndication.com_pagead_expansion_embed.js]: http://pagead2.googlesyndication.com/pagead/expansion_embed.js
[https_apis.google.com_js_plusone.js]: https://apis.google.com/js/plusone.js
[http_googleads.g.doubleclick.net_pagead_drt_s_safe_on]: http://googleads.g.doubleclick.net/pagead/drt/s?safe=on
[http_static.ak.fbcdn.net_rsrc.php_v1_y7_r_ql9vukDCc4R.png]: http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png
[http_connect.facebook.net_rsrc.php_v1_yQ_r_f3KaqM7xIBg.swf]: http://connect.facebook.net/rsrc.php/v1/yQ/r/f3KaqM7xIBg.swf
[https_ssl.gstatic.com_s2_oz_images_stars_po_Publisher_sprite2.png]: https://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite2.png
[https_apis.google.com_apps-static_js_gapi_googleapis_client_iframes_styles_...]: https://apis.google.com/_/apps-static/_/js/gapi/googleapis_client,iframes_styles_bubble_internal/rt=j/ver=DD_ff52ufs8.en_US./sv=1/am=!RERB5bJyvtSIVCfJNg/d=1/
[http_static.ak.fbcdn.net_rsrc.php_v1_yv_r_ZSM9MGjuEiO.js]: http://static.ak.fbcdn.net/rsrc.php/v1/yv/r/ZSM9MGjuEiO.js
[http_static.ak.fbcdn.net_rsrc.php_v1_yx_r_qP7Pvs6bhpP.js]: http://static.ak.fbcdn.net/rsrc.php/v1/yx/r/qP7Pvs6bhpP.js
[https_plusone.google.com_apps-static_ss_plusone_...]: https://plusone.google.com/_/apps-static/_/ss/plusone/ver=-1iqnlu1g4oiv4/am=!HKdu3RfMlih5oERU/bf=MQ/r=O
[http_b.scorecardresearch.com_beacon.js]: http://b.scorecardresearch.com/beacon.js
[http_static.ak.fbcdn.net_rsrc.php_v1_yx_r_lP_Rtwh3P-S.css]: http://static.ak.fbcdn.net/rsrc.php/v1/yx/r/lP_Rtwh3P-S.css
[http_static.ak.fbcdn.net_rsrc.php_v1_yA_r_TSn6F7aukNQ.js]: http://static.ak.fbcdn.net/rsrc.php/v1/yA/r/TSn6F7aukNQ.js
[http_static.ak.fbcdn.net_rsrc.php_v1_yk_r_Wm4bpxemaRU.js]: http://static.ak.fbcdn.net/rsrc.php/v1/yk/r/Wm4bpxemaRU.js
[http_static.ak.fbcdn.net_rsrc.php_v1_yZ_r_TtnIy6IhDUq.js]: http://static.ak.fbcdn.net/rsrc.php/v1/yZ/r/TtnIy6IhDUq.js
[http_static.ak.fbcdn.net_rsrc.php_v1_yy_r_0wf7ewMoKC2.css]: http://static.ak.fbcdn.net/rsrc.php/v1/yy/r/0wf7ewMoKC2.css
[http_static.ak.fbcdn.net_rsrc.php_v1_yO_r_H0ip1JFN_jB.js]: http://static.ak.fbcdn.net/rsrc.php/v1/yO/r/H0ip1JFN_jB.js
[http_platform.twitter.com_widgets_hub.1329256447.html]: http://platform.twitter.com/widgets/hub.1329256447.html
[http_static.ak.fbcdn.net_rsrc.php_v1_yv_r_T9SYP2crSuG.png]: http://static.ak.fbcdn.net/rsrc.php/v1/yv/r/T9SYP2crSuG.png
[http_platform.twitter.com_widgets.js]: http://platform.twitter.com/widgets.js
[https_plusone.google.com_apps-static_js_plusone_...]: https://plusone.google.com/_/apps-static/_/js/plusone/p1b,p1p/rt=j/ver=s9G1xxMtPkw.en_US./sv=1/am=!HKdu3RfMlih5oERU/d=1/
[http_pagead2.googlesyndication.com_pagead_js_graphics.js]: http://pagead2.googlesyndication.com/pagead/js/graphics.js
[http_s0.2mdn.net_879366_flashwrite_1_2.js]: http://s0.2mdn.net/879366/flashwrite_1_2.js
[experiment]: http://www.yuiblog.com/blog/2007/01/04/performance-research-part-2/
[SouthEast 7]: /images/20220824/b5b345c92c474c5f8221c88b0b6dccdd.png
[320]: http://code.google.com/p/chromium/issues/detail?id=16705
[MB]: https://plus.google.com/103382935642834907366/posts/XRekvZgdnBb
[250 MB]: http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx
[Will Chan]: https://plus.google.com/103382935642834907366/posts
[http_blog.csdn.net_horkychen]: http://blog.csdn.net/horkychen
[Cache them if you can]: http://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/
[HTTP]: http://blog.csdn.net/wy5761/article/details/21120185