Syntax: A normal script is included on the page in the following way.
<script src = "script.js"></script>
When the HTML parser finds this element, a request is sent to the server to get the script.
Asynchronous: When we use the async attribute the script is downloaded asynchronously with the rest of the page without pausing the HTML parsing and the contents of the page are processed and displayed. Once the script is downloaded, the HTML parsing will be paused and the script’s execution will happen. Once the execution is done, HTML parsing will then resume. The page and other scripts don’t wait for async scripts and async scripts also don’t wait for them. It is great for independent scripts and externally located scripts.
<script async src = "script.js"></script>
Deferred: The defer attribute tells the browser not to interfere with the HTML parsing and only to execute the script file once the HTML document has been fully parsed. Whenever a script with this attribute is encountered, the downloading of the script starts asynchronously in the background and when the scripts get downloaded, it is executed only after the HTML parsing is finished.
<script defer src = "script.js"></script>
Asynchronous vs Deferred:
|Asynchronous blocks the parsing of the page.||Deferred never blocks the page.|
|Asynchronous scripts don’t wait for each other. So if a smaller script is second in the order, it will be loaded before the previous longer one.||Deferred scripts maintain their relative order which means the first script will be loaded first while all others below it will have to wait.|
|The execution of scripts begins by pause parsing.||However, the execution of scripts begins only after parsing is completely finished but before the document’s DOMContentLoadedevent.|
Please Login to comment...