javascript - 在这种情况下，动态添加的脚本文件将以什么顺序执行？

Question

我在这里读了一篇文章:

https://varvy.com/pagespeed/defer-loading-javascript.html

它说我应该使用类似这样的东西来加载 javascript:

<script type="text/javascript">
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}
if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

我想知道，如果我要加载多个 defer.js，它会以什么顺序执行？

例如:

<script type="text/javascript">
function downloadJSAtOnload() {
  var element1 = document.createElement("script");
  element.src = "defer1.js";
  document.body.appendChild(element);

  var element2 = document.createElement("script");
  element.src = "defer2.js";
  document.body.appendChild(element);
}
if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

defer1.js 一定会在 defer2.js 之前执行吗？

谢谢

Answer 1

appendChild()同步附加脚本节点，但它异步加载脚本。所以执行顺序是不确定的(它取决于网络延迟)。