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

【问题标题】：Will script loaded with async attribute delay onload event?加载异步属性的脚本会延迟 onload 事件吗？
【发布时间】：2015-06-17 16:37:57
【问题描述】：

我在 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 事件

【问题讨论】：

如上所述，onload() 很可能会在 otherscript.js 执行之前触发，但一个简单的测试就足够了。

标签： javascript html dom

【解决方案1】：

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

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

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

【讨论】：