关于WPO监测：说说瀑布图，结合两个网站实例
很多工具都可以生成瀑布图，给WPO工作带来很多便利。例如：
1. 在Firefox或Chrome下使用Firebug
2. 在Firefox或Chrome下使用谷歌推荐的Page Speed
3. 使用Gtmetrix 网站生成瀑布图
4. 使用Webpagetest 网站生成瀑布图
在使用瀑布图的时候，也不能迷信。如果你将上面四种工具生成的瀑布图对比一下，你就会发现，四种方法同一个网站同一时间的瀑布图，相差还蛮大。
因为不同的浏览器版本、测试环境、甚至测试工具，都会对瀑布图产生影响。
比如， Firebug和Page Speed是火狐和谷歌浏览器插件，你在什么浏览器下运行，就会得到相应浏览器对应的瀑布图。
Gtmetrix 的瀑布图结果应该是火狐或者谷歌，而不是IE的结果，这点从网站下方的合作方的图标可以看出来：
笔者在Gtmetrix测试结果页面，发现下面文字。
Test Server Region: Vancouver, Canada
Using: Firefox 3.6.16, Page Speed 1.10.2, YSlow 2.1.0
说明测试地点在加拿大温哥华，浏览器是Firefox3.6
而Webpagetest可以提供不同浏览器下的瀑布图。更方便我们观察。下面是IE6 IE8 Firefox3.6 Chrome四种浏览器在webpagetest下的瀑布图。
下面我们用webpagetest举一个例子，可以看到在不同浏览器下，瀑布图会有很大的差异。
测试站点是凤凰网（www.ifeng.com），这个网站的页面组件不复杂，就一个外部JS脚本，其他的都是页面内引用的图片、样式等。
IE6 — 这是个马上被淘汰的浏览器，JS脚本阻塞非常明显。脚本执行过程中，其他的组件都无法进行。
IE8 — IE8 已经允许脚本和样式表并行下载，但似乎还不包括图片。在本例因为没有css脚本，所以不明显。（参见Steve相关文章 ）
Firefox3.6 — Firefox已经比IE8表现更好了，脚本和图片已经可以并行下载了。
Chrome — 说谷歌浏览器是革命性的，一点不错。载入组件的顺序和其他浏览器完全不同。脚本的载入顺序被浏览器自动调整了，更没有发生阻塞。
下面是另一个网站苏宁电器 （ www.suning.com ）的瀑布图，做一个补充说明。
苏宁的页面组件要复杂一些，有好几个JS文件，也有脚本。
IE6 — 这里可以看出加载第一个JS脚本阻断之后的所有组件。加载第二个JS发生了同样的事情。
IE8 — 这里可以看到IE8的进步了。两个JS脚本可以平行加载了。不过图片还是被挡在后面了。
Firefox3.6 — Mozilla的优越性，两个JS一级一个图片可以同时加载。
Chrome — 谷歌浏览器又使用了乾坤大挪移，将第三个原本不在一处的JS放到前面两个JS之后一起平行加载，图片也可以穿插其中。
上面苏宁和凤凰两个例子，可以看到IE系列的差距。不知道在IE9下会不会有改善。
不过话又说回来了，上面工具的瀑布图，真的就正确么？那也未必。因为要生成瀑布图，在内存需要驻留程序来监控组件下载，这本身就可能影响到组件的正常加载。加上互联网络本身的不稳定。 所以有的时候用同一种工具，测试两次，也会发现挺大的差别。下面是有人给steve souders留言，说他在webpagetest下测试的IE8的结果总是没有平行加载，他想不通神马原因。后来自己实测一下，发现原来是webpagetest出了bug，呵呵：
结论：
1. 不同浏览器在加载脚本和页面组件的差异很大。前端工程师不能仅仅凭某个瀑布图作为优化依据。
2. WPO前端优化时，而是应该多用几种工具，多测试多对比。
3. 不要全信瀑布图，生成瀑布图的工具也可能偶尔发神经的。
作者: 谭砚耘@用户体验与可用性设计-科研笔记
版权属于: 谭砚耘 （TOTHETOP至尚国际 ）
版权所有。转载时必须以链接形式注明作者和原始出处
如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠