前端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的提示。