JavaScript async and defer Attribute Example of Script Tag
April 02, 2016
<script> tag. The role of async attribute is to load script file asynchronously. Script files are loaded parallel to HTML parser and once script files are loaded, HTML parser is stopped to execute script files. After script execution completion, HTML parser starts parsing the page again. The role of defer attribute is that it also loads script files parallel to HTML parser, but it waits for HTML parser completion before script execution. After HTML parser completion, scripts are executed and completed. Here on this page, we will discuss async and defer attributes in detail.
boolean attributes: Boolean attributes if used, then its value is true and if not used, the value is considered as false.
classic scripts : It has a source tag and optionally muted error flag. If error flag is set, script error information will not be provided.
module scripts : It has module record and base URL used to resolve module specifiers.
async : It is a boolean attribute and once set, script loading takes place parallel to HTML parser. Once script loading is finished, HTML parser is stopped and script execution started. Once script execution completed, HTML parser is started again.
defer : It is a boolean attribute and once set, script loading takes place parallel to HTML parser. Once script loading is completed, it waits for HTML parser completion. After HTML parser completed, script execution is started and completed.
<script>
The loading and execution of JavaScript with HTML parsing depends on the different attributes used with<script> tag. If there is no type attribute specified, it is considered as classic scripts. The processing of HTML parser and JavaScript takes place as follows.
1. HTML parser starts parsing the page.
2. When a
<script> tag is found, HTML parser is stopped.
3. Script is loaded and then executed.
4. Once the script execution finished, HTML parsing starts again.
5. If more
<script> tag is found, it is loaded in the same way as described.
<script async>
When script tag is used with async attribute, the behavior of HTML parser and script loading is as follows.1. HTML parser starts parsing the page.
2. When HTML parser finds
<script async> tag , the script loading is started parallel to HTML parser.
3. Once the script loading is completed, HTML parser is stopped and script is executed.
4. Once the script execution is completed, HTML parser starts again and completes parsing.
<script defer>
When<script> tag uses defer attribute, then HTML parsing and script loading takes place in the following way.
1. HTML parsing starts.
2. When HTML parser finds
<script defer> tag, the script loading is started in parallel to HTML parser.
3. Once the script loading is completed, then it waits for completion of HTML parsing.
4. After HTML parser finishes its task, then script execution is started and completed.
<script type="module">
When we use module script, by default it uses the behavior of differ attribute. In module script, script loads their dependency scripts, too. Find the behavior of HTML parser and script loading as follows.1. HTML parser starts parsing the page.
2. Once HTML parser finds
<script type="module"> tag, script loading starts parallel to HTML parser. Scripts load all its dependency scripts too.
3. Script execution waits for HTML parser completion.
4. Once HTML parser completes parsing the page, script execution is started and completed.
<script type="module" async >
Module script can use async attribute. The behavior of HTML parser and script loading will be as follows.1. HTML parser starts parsing the page.
2. Once HTML parser finds
<script type="module" async > tag, the script loading is started parallel to HTML parser. The dependency scripts are also loaded.
3. Once the loading of scripts and its dependency scripts completed, HTML parser stops and script execution started.
4. After completion of script execution, HTML parser started again and completed.
