Question

我在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事件的发射吗？在我看来，这个脚本将在页面几乎被解析时启动。然后它会请求其他脚本，并且onload事件可能会被延迟，等待最后一个脚本执行它的操作。

我的理解是否正确？

修改

在http://plnkr.co/edit/BCDPdgCjPeNUmLbf7wNR?p=preview添加了测试而在Chrome中似乎确实延迟了onload事件

Answer 1

是的，正如您所建议的那样，它会延迟window.onload事件。

您的第一个脚本somescript.js在页面加载完成之前（例如在script被解雇之前）向页面添加了一个子window.onload元素，并且页面现在必须下载并在它可以触发script事件之前执行新附加的onload元素的src。

如果您不希望它延迟onload事件，您可以发出AJAX请求以获取otherscript.js的内容，只需eval即可在全局上下文中执行（实际上与通过script标记指定它相同，但不会延迟onload事件。）

脚本是否会加载async属性延迟onload事件？

1 个答案: