附加到 dom 时的 JavaScript 执行顺序

Question

所以我发现这个链接很好地解释了如何加载脚本:

http://www.html5rocks.com/en/tutorials/speed/script-loading/

但是我无法理解如果我这样做会发生什么:

<script>
var script = document.createElement("script");   
script.src = "//www.domain.com/script.js";
document.getElementsByTagName("head")[0].appendChild(script);      
</script>

<script>
console.log(myVar);
</script>

script.js 包含例如

var myVar = 'foobar';

所以我的问题是...由于 script.js 附加在单独的脚本标记中，这是否保证 script.js 将在之前加载并执行console.log()？

Answer 1

从您链接的网站:

Scripts that are dynamically created and added to the document are async by default, they don’t block rendering and execute as soon as they download, meaning they could come out in the wrong order. (emphasis theirs).

这意味着通过 JavaScript 添加到页面的脚本的执行顺序无法保证(如上面的示例所示)。

如果您希望执行具有确定性，则需要手动禁用 async 属性:

var script = document.createElement("script");  
script.src = "//www.example.com/script.js";
script.async = false; // overwrite the default
document.getElementsByTagName("head")[0].appendChild(script);