0

According to MDN:

Async...indicate that the browser should, if possible, execute the script asynchronously

The definition is really vague. So let me phrase my understanding explicitly and please correct me if I am wrong:

My first question is that When I use the keyword async to load a 3rd party script, the browser will continue to parse the DOM elements after the tag while downloading the script via a different thread. I want to know how browsers actually implemented the asychnoronous.

Is my interpretation correct?

My second question is that When would be a good situation to use async instead of defer? (I understand the differences between them, I just don't know when would be the case to use one instead of the other)

Let's say a script I want to include does not have any dependencies and it is not depend upon by other scripts. Why is it recommend to use async in this case instead of defer other than the difference in execution timing?

Cheng
  • 16,824
  • 23
  • 74
  • 104
  • 1
    Use async if no other scripts is depending on your script; use defer if they do. – Ioan Apr 26 '16 at 13:03
  • Let's assume there is no other script depends on a script that I am about to include. What's wrong with using defer? It's just the execution timing of the script is different, but are there any other benefits of using async? – Cheng Apr 26 '16 at 14:27
  • 1
    http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html might help – Chris Lear Apr 26 '16 at 14:32
  • @ChrisLear Thanks again for the chart. I understand that async gets executed as soon as the script is downloaded and defer will wait until the dom is loaded. But is there really a benefit of executing a script as soon as it downloads vs waiting till the dom loads? – Cheng Apr 26 '16 at 14:37
  • It's a bit quicker. That's about it. – Chris Lear Apr 26 '16 at 14:37
  • @ChrisLear according to the link you sent, the execution is quicker sure, but while it is executing, it actually blocks dom parsing. So I am not sure if it is quicker overall. You just simply moved a piece of code around but everything is still executed synchronously. – Cheng Apr 26 '16 at 14:43

1 Answers1

0

Here's what the spec says:

https://www.w3.org/TR/html-markup/script.html#script.attrs.async

async Specifies that the script should be executed asynchronously, as soon as it becomes available.

https://www.w3.org/TR/html-markup/script.html#script.attrs.defer

defer Specifies that script should be executed after the document has been parsed.

Chris Lear
  • 6,592
  • 1
  • 18
  • 26
  • I appreciate your links but I already know the differences. I am wondering how they are implemented in the browser. What does it actually mean to be `executed asynchronously`? – Cheng Apr 26 '16 at 14:25
  • It means that the script is not executed in a strict sequence. If you have a series of commands executed synchronously, prior commands are always completed before the later ones are begun. An `async` script will be executed when it finishes loading, and therefore its execution will be at an unpredictable time with respect to other scripts on the page. A sort of analogy is a click event. You don't know when it will occur, but you can attach code to it. That code needs to be isolated from assumptions about what else is going on at the time. – Chris Lear Apr 26 '16 at 14:28
  • http://stackoverflow.com/questions/748175/asynchronous-vs-synchronous-execution-what-does-it-really-mean is probably helpful here. – Chris Lear Apr 26 '16 at 14:29
  • Let me reword again. There are two aspects to `async`. One is downloading the script and two is executing the script. I want to know how the browser handled the downloading part. Does it just spawn a thread so that it can download the script in parallel of parsing the DOM? – Cheng Apr 26 '16 at 14:32
  • I can't actually back this up with a source code reference, but I'm almost certain that the download aspect is identical in both cases. `async` can execute earlier in the process than `defer`, and exactly when it executes is not predictable. That's the main difference between the two. Threads are implementation-dependent. – Chris Lear Apr 26 '16 at 14:36