Javascript性能:多个脚本块与单个更大的块

时间:2011-06-13 06:53:49

标签: javascript frontend performance

我在IE8上观察到一种奇怪的行为(在FF 3.5上没有看到)。 我创建了2个示例网页,其中只包含一些JS。 Page1:3 JS块(标签)中包含非常小的内联JS。 第2页:与上面相同的JS,但是所有3个脚本组合在一个块中。

我使用dynatrace打开页面并观察到对于page1,每个脚本花费大约27-30ms的时间进行解析/执行。总时间约为80毫秒。 对于Page2,组合的JS需要大约30ms。 有人可以解释一下这背后的原因吗?将较小的JS组合成一个是否更好?

PS:对于所有脚本,dynatrace添加的检测时间可以忽略不计。 Firefox 3.5没有显示此行为。对于每个较小的JS块,FF的执行时间约为1ms,组合JS的执行时间约为3ms。

1 个答案:

答案 0 :(得分:1)

当浏览器遇到脚本块时,它必须在执行该块中的脚本时暂停呈现页面。

我不知道为什么这会因为IE8而不是FF而如此突然出现。可能是因为上下文切换在IE8中特别昂贵,或者FF可以在幕后做一些工作来组合你的块,如果它确定它可以(我只是在这里猜测)

脚本块也会阻止并行下载。如果您从多个主机名下载图像,则可以并行执行,除非您正在执行脚本块。

一般来说,我会说最好的做法是组合你的脚本块。就个人而言,我建议你将它们移到一个单独的文件中。

顺便提一下,当您将指标移动到其他文件时,指标会发生什么?

请参阅Yahoo Developer的Best Practices for Speeding Up Your Web Site