Q1: async & defer Execution Order

[00:00:00]
>> Should we just get right into it, see how it goes? Right, let's get started with the very first question. Put the scripts in the right order of execution. So for A, we have an async script that loads in 300 milliseconds. Then for B, we have a defer script that loads in 200 milliseconds.

[00:00:22]
And C is another defer script that loads in 300 milliseconds. And for D, we have an async script that loads in 50 milliseconds. And E is a script that contains both async and defer and loads in 60 milliseconds. All right, ready? Let's go to the answer. So the right order is D, async first, that loads in 50 milliseconds.

[00:00:49]
Then E, the async defer, which loads in 60 milliseconds. A, async that loads in 300 milliseconds, defer in 200 milliseconds, and the other defer in 300 milliseconds. So let's see why that happened. First, let's just take a look at a regular script that doesn't have defer or async.

[00:01:07]
So when a script tag is discovered by the HTML parser, it stops the parsing, fetches the script from wherever you're loading it. And once it's downloaded, it executes the scripts, also still on the main thread, and then it continues parsing the HTML. Now, this is called render blocking, right?

[00:01:26]
The parser has to literally stop, fetch the script and execute it, and then continue parsing. This is not great when you care about showing something to your users really fast. Now, one thing to kind of avoid that is by using the async attribute. So in that case when a script tag is discovered, it still fetches the script, but in the meantime it can still just continue parsing the HTML.

[00:01:52]
But then once it's downloaded, the script still gets executed on the main thread once it's ready. So in that case the parser still has to kind of stop parsing, execute the scripts, and continue parsing. So with async it's also important that there's no guarantee of execution, right? Scripts just get executed as soon as they've been downloaded.

[00:02:13]
Now, with defer, we can still fetch the scripts when the script tag is discovered, but that script only gets executed once the HTML parser has completed parsing. So only at the very end when kind of the DOM is already complete. The good thing about defer is that you can guarantee the order of the script execution.

[00:02:33]
So this is a much better alternative for scripts that rely on each other, but there shouldn't be render blocking. So when we look at our example, we first had the async2, which loaded in, I forgot what it was, 50 milliseconds, something like that. So that one is very fast, cuz once that async2 has been loaded, downloaded, it can get executed on the main thread right away.

[00:02:58]
And then we also have the async defer, and this is kind of a tricky one, cuz when you have both keywords, async takes precedence. It's only if browsers don't support async, then it will fall back to defer. But when you have both async and defer, the script will be async.

[00:03:15]
So also this one loads in 60 milliseconds, so this one will get executed as the second script. Then for a while, there's nothing cuz the other scripts are still loading in the background. And then async1, it has finished loading, gets executed on the main thread. And only once the HTML parsing is completed, will defer1 and defer2 get executed.

[00:03:36]
Still in the order that we wrote it in the script, cuz they're defer.