前端SPOF調(diào)查
昨天PatMeenan 發(fā)了一篇文章： Testing forFrontend SPOF ,
SPOF是指單點(diǎn)故障，其現(xiàn)象是 HTML文檔已經(jīng)加載完畢，但其他資源例如(CSS,JS,字體文件)等加載出現(xiàn)了阻塞，導(dǎo)致頁(yè)面空白20秒甚至更長(zhǎng)的時(shí)間。
前端SPOF最頻繁出現(xiàn)的原因是第三方內(nèi)容，如果主站成功返回HTML文檔，從主站返回的其他相關(guān)資源應(yīng)該都成功返回，但第三方內(nèi)容往往不是由主站控制，因此會(huì)出現(xiàn)不可預(yù)期的錯(cuò)誤，所以一個(gè)網(wǎng)站的第三方資源不應(yīng)該在主站資源之前被加載，這將有可能引起前端SPOF。
在我的博客中，我曾經(jīng)提及如何模擬前端SPOF以及如何避免它。但我沒(méi)有為網(wǎng)站開(kāi)發(fā)者提供一個(gè)方法去檢查網(wǎng)站是否存在前端SPOF的可能。Pat Meenan 建立了一個(gè)公共的黑洞服務(wù)器：blockhole.webpagetest.org72.66.115.13 。把網(wǎng)站用到的第三方資源指向這個(gè)IP，并刷新頁(yè)面就可以檢查出你的頁(yè)面是否存在前端SPOF。
以下是一些常用的第三方資源host，我已經(jīng)把他們指向了Pat Meenan提供的黑洞服務(wù)
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文件保存后，重啟你的瀏覽器，這些資源將全部超時(shí)。Pat在文章中提到的20秒時(shí)間是因?yàn)閣indow系統(tǒng)運(yùn)行的，而我在Macbook中運(yùn)行的超時(shí)時(shí)間是75秒，任何使用了這些第三方資源的網(wǎng)站將會(huì)被堵塞75秒。
調(diào)查結(jié)果
配置完成后，我訪問(wèn)了 美國(guó)前100家網(wǎng)站，令我感到驚喜的是，排名前20的網(wǎng)站沒(méi)有受到前端SPOF的影響，其中幾個(gè)網(wǎng)站他們雖然使用了這些第三方資源，但是他們存放在自己的域名下并自行維護(hù)。
MSN.com
引用ar.voicefive.com ，但它使用了document.write技術(shù)異步 。
AOL
引用platform.twitter.com，但把請(qǐng)求放在body***底部，沒(méi)有影響頁(yè)面加載
IMDB
使用Google Analytics(分析)的異步版本，并把 platform.twitter.com 的widget放在在iframe中
LiveJournal
通過(guò)一個(gè)自行開(kāi)發(fā)的異步加載器加載 Gooogle +1 和 Facebook插件
在前100名網(wǎng)站中我發(fā)現(xiàn)有5個(gè)存在前端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，導(dǎo)致右半邊空白
這些結(jié)果雖然比我預(yù)想的好，但仍然令人震驚。雖然我只找到5個(gè)網(wǎng)站，前端SPOF的總體樣本的5%。這一比例將有可能成為指標(biāo)，因?yàn)闇p少加載量***的做法是更廣泛地采用***網(wǎng)站提供的服務(wù)。另外，這份HOST只包括一部分常用的第三方資源而且我在這次測(cè)試中并沒(méi)有考慮 廣告是否加載。
讓您的網(wǎng)站因?yàn)橐粋€(gè)小小的widget按鈕或者一個(gè)分析腳本而無(wú)法訪問(wèn)是否值得，特別是這個(gè)問(wèn)題是可以被解決的時(shí)候。如果你是上述5個(gè)網(wǎng)站之一，為了你和你的用戶，想辦法解決前端SPOF吧。如果你的排名在100之外，請(qǐng)通過(guò)編輯你的HOST 使用 Pat Meenan 的黑洞服務(wù)器去測(cè)試你的網(wǎng)站是否存在前端SPOF，并遵循WebPagetest.org的提示。
原文：http://article.yeeyan.org/view/258596/225158
【編輯推薦】
