在《一小段js代码引发的网站可用性灾难–WPO优化反面实例》中，我们提到，“在线聊天”的JS代码下载如果出了状况，会影响到后续的页面组件加载，从而造成可用性巨大灾难。
今天再来一个更形象的例子，而且更有代表性。
很多的网站都加载了Google Analytics（简称GA） 代码，不少外贸网站添加了Google Translate （简称GT）代码。还有一些注重社会化营销的，会添加Facebook或Twitter的JS代码。
如果GA或GT在某个时间突然被墙了，会给你的网站带来什么样的杯具呢？我们看看下面六幅视频截图（图片左边是正常打开网页，简称正常态；右边是被墙了之后的打开网页，简称墙态）。
0秒：正常态和墙态都一样，什么都没有
3.1秒：正常态的页面顶部和目录区已经载入；墙态只载入了顶部，因为GT被墙了，正在等待。
5.2秒：正常态已经基本加载完毕，呈现给用户的是可使用的网页；墙态还在等GT，等等等……等不到……
7.3秒：正常态的各组件彻底加载完成；墙态还在等GT，等等等……等不到……
25.7秒：正常态加载完，没变化；墙态终于等到了——GT超时信号，开始加载网页其他组件，
这个时候黄花菜可能都凉了。不过GT超时了，GA还没有超时，还要继续等待大约20秒。不过幸运的是，GA的代码放在页面底部，所以这个等待已经不影响用户使用了。
46.3秒：正常态加载完，没变化；墙态终于等到了——GA超时信号，苦难终于结束了。
幸运的是，好长一段时间GA和GT还都正常，但世事难料，谁知道哪天墙来了，那么对于你的网站而言就无疑是一个灾难了——用户需要25秒才能勉强打开一个首页。所以未雨绸缪，总是好的。
解决方法：
1. 将外部站点的JS代码放到页面底部。这样页面虽然没有加载完成，至少用户能看到大部分内容。
2. 如果无法做到第一点，用异步加载（或Ajax）来载入外部站点的JS代码。
3. 如果上述两点都做不到，那就经常保持警惕，随时留意“墙来了”马上取消JS。
另外，上述视频地址：http://www.webpagetest.org/video/view.php?id=111204_f99d8ca8263aeb4b652d1b7e53116b38fa14ae6b
作者: 谭砚耘@WPO及网站可用性-科研笔记
版权属于: 谭砚耘 （TOTHETOP至尚国际 ）
版权所有。转载时必须以链接形式注明作者和原始出处
http://www.wpowhy.com/wpo-experiment-what-happened-when-google-is-blocked-by-firewall-353/
如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠
没有评论:
发表评论