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

script在HEAD部分有一个带有标签的页面

<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事件将不会减慢速度。

但是,它将减慢window的onload事件的速度,因为在完全执行此脚本之前,不会触发此事件。

我的问题是,将其移至页面底部是否有任何好处?看起来,由于一切都是异步发生的,因此与<script ..>标记调用本身无关如果有的话,它实际上可能会减慢onload事件的速度,因为只有在完成所有步骤(包括异步脚本执行)后,此事件才会执行。由于该脚本将在页面几乎被解析时启动,因此onload事件可能会进一步延迟,以等待最后一个脚本执行其操作。

我的理解正确吗?

beautifulcoder

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章