外部 async/defer javascript 是否保证在 window onload 事件之前执行？

Question

据我了解，异步脚本在文档解析完成之前执行，之后执行延迟脚本。但是他们与 window.onload 事件的关系呢？

如果我理解正确，异步脚本保证在 window 之前运行 onload 和 deferred 可以在那之后执行。那正确吗？或者这两种脚本总是在 window onload 之前执行？

Answer 1

MDN 对 load 事件的描述如下：

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

异步脚本在下载后立即加载，延迟脚本在 HTML 解析后加载。在它们也被加载后， load 事件触发。所以是的，规格中有保证。

Answer 2

是的，async 和 defer 脚本在 window 的 load 事件之前执行运行。

我只想指出，该活动名为 load，而不是 onload。 window.onload 是为此事件附加事件处理程序的一种方法。

我还建议将 load 事件附加到 script 元素本身，而不是 window 对象：

<script>
  var script = document.createElement("script");
  script.addEventListener("load", function(event) {
    console.log("Script finished loading and executing");
  });
  script.src = "http://example.com/example.js";
  script.async = true;
  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
</script>

外部 async/defer javascript 是否保证在 window onload 事件之前执行？

Are external async/defer javascripts guaranteed to execute before the window onload event?

html

javascript

asynchronous

onload

deferred-execution