4

By my understanding async scripts are executed before document parsing finished and defer scripts after that. But what about their relation to the window.onload event?

If I understand correctly async scripts are guaranteed to run before window onload and deferred may execute after that. Is that right? Or are both of these kinds of scripts always executed before window onload?

Tom
  • 7,515
  • 7
  • 38
  • 54
  • 1
    I'm not 100% sure, but from the [MDN script page](https://developer.mozilla.org/en/docs/Web/HTML/Element/script) it sounds more that `async` scripts are just queued up in the async queue and executed as soon as the engine pick them from there. I'm not sure there's any relation with the `window.onload` event. – MarcoL Jun 02 '16 at 09:58

2 Answers2

5

MDN says the following about the load event:

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.

Async scripts are loaded as soon as they are downloaded, defered scripts are loaded after the HTML is parsed. And after they are loaded too, the load event triggers. So yes, it is guaranteed in the specs.

meskobalazs
  • 15,741
  • 2
  • 40
  • 63
  • 1
    Yes, my problem was with the "have finished loading" part. In my mind there is a difference between downloading and executing a script and I was not sure finished loading meant both of these, or finished loading can also mean the script is downloaded, but maybe not executed. But you are probably right and loading means both of these. I wonder if there is an exact definition of "loading" a script or it's just implied that it also means executing. – Tom Jun 02 '16 at 10:21
  • I've doing some experiments, it seems like the `load` event for the window object does wait for scripts to loaded and executed, even if they were added dynamically. – Flimm Jun 15 '18 at 11:46
2

Yes, async and defer scripts do run before the window's load event.

I just want to point out that the event is called load, not onload. window.onload is one way to attach an event handler for this event.

I would also recommend attaching a load event to the script element itself, rather than on the window object:

<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>
Flimm
  • 136,138
  • 45
  • 251
  • 267
  • Thanks, I did not know about the `load` event on a script. That snippet is even used as an example for the `load` event [here](https://developer.mozilla.org/en-US/docs/Web/Events/load#script_element). But according to [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async) "Dynamically inserted scripts (using document.createElement) load asynchronously by default". So it sounds like setting `script.async = true` does nothing. Probably good to keep it for clarity. – Ben J Nov 21 '18 at 09:34
  • @BenJ Setting `script.async = false;` makes the script execute synchronously. If you don't set `script.async` to anything, I'm not sure what the default is, but it's probably good to set it manually, like you said, to avoid depending on the default and to make the intent clear for easier maintenance. – Flimm Nov 17 '21 at 11:07