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

我在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.

解决方法:

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

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

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

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

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

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

上一篇:javascript – 在Webpack中使用jQuery


下一篇:组件中的javascript – store.getState或mapStateToProps