WPO实操: 怎样通过 WebPagetest 制作js阻断视频？
WebPagetest 是一个很有用的网站。可以帮你分析网站的性能，类似 GTMetrix ，比较独特的地方是 WebPagetest提供多网站对比，还提供手机客户端性能统计，以及视频演示功能。也就是说，你可以将自己网站首页打开过程，录制下来，以备以后查看。
你可能觉得这个视频展示功能，看起来没有神马特别，我用录屏软件不就行了么？
是的，可是用录屏软件无法模拟一种特殊的情况，就是JS阻断的状况。
在笔者之前的博文 《一小段js代码引发的网站可用性灾难–WPO优化反面实例》 ， 《WPO实验：如果Google被墙，网站会出现怎样的杯具？》 中我们看到JS阻断会引起很严重的后果，造成网页迟迟无法完成加载，用户看到一片白屏的情况。
可是，我们应该如何模拟出JS阻断的效果呢？举个例子，拿 buyonme.com 网站来说，在首页加载了三个外部站点的JS文件，分别来自：
www.google-analytics.com Google访问分析
chatserver.comm100.com 即时聊天插件
translate.google.com Google翻译工具
我们现在想观测一下，上述三台服务器都出现故障的情况会发生什么灾难（幸好现实中，google的服务还是颇稳定的，不过因为有伟大的墙，所以还是有可能出故障的）。
这个时候就有一个难点了，由于以上三台服务器都正常运行，你怎么能测试故障环境呢？
哈！有的哥们说，那简单啦，我们修改一下 hosts 文件不就得了？
对！这个思路是对的，把上述三个主机名指向错误的IP地址，来模拟下载js组件故障。可以新的问题又来了，你如果随便指向一个IP，马上就会反馈：该IP不存在，或者该IP不存在该主机名的信息。
我们是想测试服务器连接不上然后超时的状态，如果随便指向一个IP，马上就有错误信息反馈回来了，那不就测试不出来想要的效果了么？
呵呵，还有一个方法。这个世界上有一种服务器叫“黑洞服务器 Blackhole Server”，也就是当你发送请求过去以后，就进入了黑洞，再也没有信息反馈出来了。刚好可以模拟对方服务器故障或超时的状态。
我们提供一个黑洞服务器，免费使用：blackhole.webpagetest.org
有了以上思路，我们就可以使用 WebPagetest 来模拟JS阻断了。
第一步：做基本设置，可以设置浏览器类型，也可以设置宽带类型，还可以选择地理位置
第二步：设置Script代码，也就是将主机名指向黑洞服务器，在WebPagetest下的Script要这么写
setDnsName www.google-analytics.com blackhole.webpagetest.org
setDnsName chatserver.comm100.com blackhole.webpagetest.org
setDnsName translate.google.com blackhole.webpagetest.org
setDnsName ajax.googleapis.com blackhole.webpagetest.org
setDnsName apis.google.com blackhole.webpagetest.org
setDnsName connect.facebook.net blackhole.webpagetest.org
setDnsName platform.twitter.com blackhole.webpagetest.org
navigate http://www.buyonme.com/
（上面的1、2、3条是必要的，4、5、6、7行是针对常用的JS外部插件做得设置，在本例中可以删除。最后一行是测试的网址）
第三步：勾选“生成视频”
第四步：点击“Start Test”
第五步：点击结果页面的“Watch Video”
大功告成。你可以拿着视频展示的结果给老板看，告诉他网站存在多么严重的WPO问题。
对于Buyonme网站，下面是两个模拟JS阻断的视频：
对外部JS未作异步调用： http://www.webpagetest.org/video/view.php?id=111204_KZ_2CY09.1.0 24秒完成主要页面载入
对外部JS已作异步调用： http://www.webpagetest.org/video/view.php?id=111207_54_2E2VQ.1.0 5秒完成主要页面载入
作者: 谭砚耘@用户体验与可用性设计-科研笔记
版权属于: 谭砚耘 （TOTHETOP至尚国际 ）
版权所有。转载时必须以链接形式注明作者和原始出处
如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠