javascript - 加载异步属性的脚本会延迟 onload 事件吗？

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添加一个 child script元素到页面，在页面完成加载之前(例如，在 window.onload 触发之前)，页面现在必须下载并执行新附加的 script 的 src元素才能触发 onload事件。

如果您不希望它延迟 onload事件，你可以做一个AJAX请求获取 otherscript.js 的内容简单地 eval它因此它在全局上下文中执行(实际上与通过 script 标记指定它相同，但不会延迟 onload 事件)。