Asynchronous and deferred JavaScript execution explained

Asynchronous and deferred JavaScript execution explained - defer 會先拉, 然後等到 HTML parser 直行完才會跑 javascript, async 會拉完javascript馬上執行, 可以跑一些與 DOM 無關的 javascript, 此外, async是一拉完就執行不保證會按照順序執行, defer會按照順序執行

• Normal execution <sscript> This is the default behavior of the <script> element. Parsing of the HTML code pauses while the script is executing. For slow servers and heavy scripts this means that displaying the webpage will be delayed.
• Deferred execution <script defer> Simply put: delaying script execution until the HTML parser has finished. A positive effect of this attribute is that the DOM will be available for your script. However, since not every browser supports defer yet, don’t rely on it!
• Asynchronous execution <script async> Don’t care when the script will be available? Asynchronous is the best of both worlds: HTML parsing may continue and the script will be executed as soon as it’s ready. I’d recommend this for scripts such as Google Analytics.

HTML5's async Script Attribute

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.