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阻断了。
?
第一步：做基本设置，可以设置浏览器类型，也可以设置宽带类型，还可以选择地理位置
第四步：点击“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?别忘了修改小老鼠