将异步脚本移动到页面底部有什么好处吗?

时间:2015-04-11 12:53:06

标签: javascript html

我在HEAD部分有一个script标记的页面:

<script src="somescript.js" type="text/javascript" async></script>

由于它包含async属性,因此它会异步加载,浏览器会分析页面而不等待下载此脚本。下载后,此脚本也将异步执行,因此浏览器可以继续解析页面。

此脚本一旦下载,将执行一些操作,并通过类似于此的内容动态插入另一个脚本:

var a = document.createElement('script');
    a.type = 'text/javascript';
    a.src = 'http://domain/otherscript.js';

    var elem_body = document.getElementsByTagName('body')[0]; 
    elem_body.appendChild(a);

这个新的动态插入脚本也将异步执行,浏览器可以继续执行其他操作,因此可以根据需要解析页面或执行其他脚本。

现在,我的理解是这个脚本从开始到结束执行都不会以任何方式阻止浏览器。它将加载,插入另一个脚本并完全异步执行。 `DOMContentLoaded事件根本不会减慢。

然而,它会减慢窗口的onload事件的速度,直到完全执行此脚本,此事件才会触发。

我的问题是将这个移到页面底部会有什么好处吗?似乎一切都是异步发生的,除了<script ..>标签调用本身之外没有任何区别。如果有的话,它实际上可以减慢onload事件的速度,因为只有当所有事情都完成后才会执行,包括执行异步脚本。由于此脚本将在页面几乎被解析时启动onload事件可能会进一步延迟,等待最后一个脚本执行此操作。

我的理解是否正确?

1 个答案:

答案 0 :(得分:3)

仅当浏览器不支持async时。如果没有,它将在发现<script>标记的任何地方阻止执行。我会把它放在底部以防万一。