WPO实验：Javascript性能优化的两个测试

本文部分节选翻译自： JavaScript Performance  by steve souders

 

javascript在WPO（网页性能优化）中的作用不容质疑，甚至很多情况下，为了优化用户速度体验，首要的选项就是优化javascript。

 

如果页面不包含js脚本，访问时间将缩短1/3

steve做了一个实验，将alexa的前100位排名的网站首页，使用webpagetest测试速度。第一次测试时，不屏蔽页面的JS代码，也就是正常打开。第二次，屏蔽所有外部javascript脚本，然后打开首页。屏蔽的方法是使用webpagetest的“block”功能，输入“.js”就可以屏蔽所有js脚本（有一篇相关文章《怎样通过webpagetest制作js阻断视频 》大家可以参照一下）。

steve总共测试了100个网站，测试结果如下图。包含js脚本时，网站首页平均打开的时间是3.65秒，不含js脚本时打开时间是2.487秒，大约节省了1/3时间。当然这并非一个完美的测试，因为一些外部脚本不使用.js后缀，另一些页面内脚本也无法屏蔽，不过1/3的时间节省也是相当可观的。

 

笔者思考：一个页面如果节省1/3的载入时间，将会大大提升用户浏览体验。虽然js代码经常是不可少的，但至少我们应当尽量在可能情况下减少外部js代码。或者使用异步调用优化渲染，避免js阻塞。

 

浏览器对异步调用外部js脚本的支持

google analytics的部分代码如下

var ga = document.createElement(‘script’);
ga.type = ‘text/javascript’;
ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(ga, s);

上面谷歌分析代码就采用了异步调用方式，动态创建了script元素，加快载入时间。这是异步调用js组件的其中一种方法。

在上面代码采用了insertBefore()方法，一部分浏览器不能很好的支持这个方法，无法真正实现“异步”的意义。也就是说，对某些浏览器，如果第一个异步脚本加载耗费很长时间的话，也会影响到其他的脚本执行。所幸的是，新版本的浏览器大多数都支持async=true 这句话，可以避免脚本阻塞。

 

下面是一个实验，载入两个异步脚本，看看在含有async=true和不包含async=true下不同浏览器的支持情况。看看测试结果：

我们看第二列，使用了async=true，绝大多数浏览器都支持，除了Opera系列的几个浏览器。绿色是没发生阻塞的，红色是发生了阻塞的。

再看看第三列，没有采用async=true，不支持的浏览器多了OmniWeb和firefox 3.0两中浏览器。

笔者认为上面的结果反映了这样的结论：无论是否添加async=true，目前大多数主流浏览器都支持异步脚本的优化，不会产生阻塞情况。但顺手添加一句async=true，就能支持更多的浏览器。

 

另外从第四列，我们能看到异步加载与onload事件之间的关系。onload事件是用来判断页面是否完成加载，当然应该包括异步加载的脚本文件。举个例子，网页中包含了一段谷歌分析代码外部脚本ga.js，可能网页主体内容已经加载完成了，但ga.js还在慢慢加载，浏览器应该能正确判断出目前整体网页还没有加载完，不会触发onload事件。而事实怎样呢？——很多浏览器无法正确判断异步加载的完成时间，甚至包括ie6/ie7/ie8/ie9浏览器。

结论：如果你的网站包含了异步加载的脚本，那么使用onload事件时需要留心，可能不同浏览器触发onload脚本的条件是不同的。

 

作者: 谭砚耘@用户体验与可用性设计-科研笔记

版权属于: 谭砚耘 （TOTHETOP至尚国际  ）

版权所有。转载时必须以链接形式注明作者和原始出处

如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠