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

Question

我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事件不会慢下来.

那么,这可能会延迟onload事件的发射吗？在我看来,这个脚本将在页面几乎被解析时启动.然后它会请求其他脚本,onload事件可能会延迟进一步等待最后一个脚本执行它的事情.

我的理解是否正确？

编辑

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

Answer 1

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

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

如果您不希望它延迟onload事件，您可以AJAX请求获取内容otherscript.js并简单地eval让它在全局上下文中执行（与通过script标签指定它有效相同，但不会延迟onload事件）。