多个内联JS脚本会减慢页面的加载时间吗？

Question

我正在尝试优化具有大量JS意粉代码的网站的加载时间.其中一些实际上看起来像这样:

<script>var x="foo";</script>
<script>var y="bar";</script>

而不是理智程序员代码:

<script>
    var x="foo";
    var y="bar";
</script>

所以我想知道这种事情是否真的有害吗？除了美学,将脚本组合成一个脚本标签可以带来任何加载时间的好处吗？

Answer 1

当浏览器script在解析页面的HTML期间遇到元素时,会发生以下情况:

1. 浏览器暂停HTML的处理.
2. 浏览器启动其JavaScript解释器的实例.
3. JavaScript解释器编译JavaScript并将其添加到当前页面的全局JavaScript池中.
4. 浏览器继续解析HTML,重复2.和3. script与HTML 中的元素一样多次.

因此,拥有多个script元素会降低页面的渲染速度.scriptHTML中存在的元素越少,页面呈现的速度就越快.

如果您的文档包含通过srcattrbute(例如<script src="http://example.com/myscript.js">)的脚本,那么您可以使用async属性来延迟脚本处理.这是新版浏览器支持的功能(例如自2010年9月发布的Firefox 3.6和基于Webkit的浏览器).但内联脚本仍将阻止解析,直到它们被解释为止.