Async and defer are boolean attributes used in conjunction with the <script> tag to optimize the integration of external scripts into our web page.

Exploring Different Ways to Utilize Script Tag Attributes

1 ) Synchronous/Normal in Script Tag:

• Initially, the HTML starts parsing and rendering progress, but it pauses midway to wait for the script tag to be fetched or loaded by the browser. It then waits for the script tag to complete its execution process. Once the execution is finished, the HTML resumes and completes its parsing and rendering progress.

• It is worth noting that relying on such a mechanism with script tags is not considered optimal or advisable.

1. Async Attribute in Script Tag:

• As HTML parsing and rendering progress, scripts are fetched asynchronously from the network. When the scripts become available in the browser, the HTML parsing and rendering temporarily halt. At this point, the fetched scripts are executed, and once their execution is finished, the HTML parsing and rendering process resumes until it reaches completion.

1. Render Attribute in Script Tag:

• HTML parsing and rendering occur continuously while scripts are fetched in parallel. However, script execution occurs only after the HTML parsing is completed.

The async attribute, when applied to scripts, does not guarantee the order of script execution. On the other hand, using the defer attribute ensures that scripts will be executed in the order they appear in the HTML document.

When using the async attribute on multiple scripts that have dependencies on one another, there is no guarantee of their execution order. This can potentially lead to code-breaking issues. In such cases, it is advisable to use the defer attribute instead to ensure proper execution order.

When loading modular and independent scripts like Google Analytics or other analytic scripts, using the async attribute can be a sensible choice. However, for general code that depends on specific execution order, it is recommended to use the defer attribute. The defer attribute ensures proper script execution and avoids unnecessary code redundancy.