The Defer property and Async property in JavaScript

In HTML, the script tag has 6 attributes, where the defer and async properties are difficult to understand, and the nonsense is less than a graph that explains everything:

When we introduce the JS code, we write this:

<script type= "Text/javascript" defer= "defer" async= "True/false" src= "JS document Address" ></script>

Comparison of defer and async

Same point:

• Do not block page rendering when loading files;
• Invalid for the inline script;
• The Document.Write method cannot be called in a script that uses these two properties;
• An event callback with the script onload;
• Allows for undefined attribute values, using only property names;

Different points:

• Async is defined in version html4.0 of HTML, which causes different levels of support due to different browser versions defer;html5.0;
• Execution time: The script for each async attribute executes immediately after it is downloaded, and is executed before the Load event of the window. As a result, it is possible that the sequence of script execution is disrupted, and every script of the defer property is executed after the page has been parsed, in the order it was originally executed, and before the document's domcontentloaded.

There are three possible combinations of these two properties:

• If Async is true, then the script executes asynchronously after the download is complete.
• If Async is False,defer true, then the script executes after the page is parsed.
• If both async and defer are false, then the script will stop parsing the page, download and execute it immediately.

The Defer property and Async property in JavaScript