前端SPOF调查

作者：Steve sounders

译者：heavenhao

======================译文正文==============================

 

昨天PatMeenan 发了一篇文章： Testing forFrontend SPOF ,

 

SPOF是指单点故障，其现象是 HTML文档已经加载完毕，但其他资源例如（CSS,JS,字体文件）等加载出现了阻塞，导致页面空白20秒甚至更长的时间。

 

前端SPOF最频繁出现的原因是第三方内容，如果主站成功返回HTML文档，从主站返回的其他相关资源应该都成功返回，但第三方内容往往不是由主站控制，因此会出现不可预期的错误，所以一个网站的第三方资源不应该在主站资源之前被加载，这将有可能引起前端SPOF。

 

在我的博客中，我曾经提及如何模拟前端SPOF以及如何避免它。但我没有为网站开发者提供一个方法去检查网站是否存在前端SPOF的可能。Pat Meenan 建立了一个公共的黑洞服务器：blockhole.webpagetest.org72.66.115.13 。把网站用到的第三方资源指向这个IP，并刷新页面就可以检查出你的页面是否存在前端SPOF。

 

 

以下是一些常用的第三方资源host，我已经把他们指向了Pat Meenan提供的黑洞服务

 

72.66.115.13 apis.google.com
72.66.115.13 www.google - analytics.com
72.66.115.13 connect.facebook.net
72.66.115.13 platform.twitter.com
72.66.115.13 s7.addthis.com
72.66.115.13 l.addthiscdn.com
72.66.115.13 cf.addthis.com
72.66.115.13 API - public.addthis.com
72.66.115.13 widget.quantcast.com
72.66.115.13 ak.quantcast.com
72.66.115.13 assets.omniture.com
72.66.115.13 www.omniture.com
72.66.115.13 scripts.omniture.com
72.66.115.13 b.voicefive.com
72.66.115.13 ar.voicefive.com
72.66.115.13 c.statcounter.com
72.66.115.13 www.statcounter.com
72.66.115.13 WWW - beta.statcounter.com
72.66.115.13 js.revsci.net

 

 

修改你的/etc/host文件保存后，重启你的浏览器，这些资源将全部超时。Pat在文章中提到的20秒时间是因为window系统运行的，而我在Macbook中运行的超时时间是75秒，任何使用了这些第三方资源的网站将会被堵塞75秒。

 

调查结果

 

配置完成后，我访问了 美国前100家网站，令我感到惊喜的是，排名前20的网站没有受到前端SPOF的影响，其中几个网站他们虽然使用了这些第三方资源，但是他们存放在自己的域名下并自行维护。

 

 

MSN.com	引用ar.voicefive.com ，但它使用了document.write技术异步 。
AOL	引用platform.twitter.com，但把请求放在body最低底部，没有影响页面加载
IMDB	使用Google Analytics（分析）的异步版本，并把 platform.twitter.com 的widget放在在iframe中
LiveJournal	通过一个自行开发的异步加载器加载 Gooogle +1 和 Facebook插件

 

在前100名网站中我发现有5个存在前端SPOF

CNET	在HEAD加载了http://platform.twitter.com/widgets.js
StumbleUpon	在BODY顶部加载了http://connect.facebook.net/en_US/all.js
NFL	在HEAD加载了http://connect.facebook.net/en_US/all.js
Hulu	在HEAD加载了Google Analytics脚本
Expedia	在BODY中间加载了http://connect.facebook.net/en_US/all.js，导致右半边空白

 

 

这些结果虽然比我预想的好，但仍然令人震惊。虽然我只找到5个网站，前端SPOF的总体样本的5％。这一比例将有可能成为指标，因为减少加载量最好的做法是更广泛地采用顶级网站提供的服务。另外，这份HOST只包括一部分常用的第三方资源而且我在这次测试中并没有考虑 广告是否加载。

 

让您的网站因为一个小小的widget按钮或者一个分析脚本而无法访问是否值得，特别是这个问题是可以被解决的时候。如果你是上述5个网站之一，为了你和你的用户，想办法解决前端SPOF吧。如果你的排名在100之外，请通过编辑你的HOST 使用 Pat Meenan 的黑洞服务器去测试你的网站是否存在前端SPOF，并遵循WebPagetest.org的提示。