Script Tag — Defer and Async
In this blog, we will brush up the basics of Attributes in the script tag and know about the scenarios in which these attributes are used.
<script>
As soon as the script tag appears in HTML without any attribute.
1. HTML parsing is paused.
2. The script is fetched from the server.
3. The script gets executed.
4. HTML parsing continues.
<script async>
As soon as the script tag appears in HTML with async attribute.
1. HTML parsing continues, no impact on parsing at that time.
2. The script is fetched from the server.
3. As soon as the script is fetched completely, HTML parsing is paused.
4. The script gets executed completely.
5. HTML parsing continues.
<script defer>
As soon as the script tag appears in HTML with the defer attribute.
1. HTML parsing continues, no impact on parsing at that time.
2. The script is fetched from the server.
3. As soon as the HTML parsing is complete, the script gets executed.
Applications <script> without attribute
If your application has to work on different browsers and you don’t have an idea about the async and defer support, use the normal script tag at the end of the body tag.
Applications of <script async>
When you are using the async attribute the script that downloads first will be executed first, no matter what is the sequence of that in HTML.
So if you know that your application will be running only on the browsers that support the async attribute and your script is independent of other scripts you should use the async attribute.
Applications of <script defer>
The scripts with defer tags are executed in the sequence in which they are present in HTML, not in the sequence of download.
So if you know that your application will be running only on the browsers that support the defer attribute then you should use defer attribute. This will help you in early download your js files in parallel to HTML parsing.
