How JavaScript is Parsed, Fetched, and Executed

JavaScript execution is a nuanced process influenced by the script type and specific attributes that determine how and when the browser processes a script. Understanding these mechanics can help optimize page performance and enhance user experience. Let's break down the key concepts.

Classic Scripts

By default, classic scripts are render-blocking, meaning the browser won’t render any content until the script has been fully downloaded and executed. This can slow down page loads, but attributes like async and defer help mitigate this issue.

• async Attribute: The script is fetched in parallel while the HTML is being parsed and executes as soon as it's ready, before the load event fires. This allows for non-blocking execution, improving perceived performance.
• defer Attribute: Similar to async, the script is fetched in parallel, but execution is delayed until the entire HTML document is parsed. This ensures full DOM access while maintaining page parsing efficiency.
• No async or defer: The script is fetched and executed immediately, blocking further parsing until execution is complete.

Module Scripts

Module scripts (type="module") follow a different set of rules and are designed for a modern JavaScript development workflow.

• If async is present, both the module script and its dependencies load in parallel, executing as soon as they are ready.
• Without async, fetching still occurs during parsing, but execution waits until parsing is complete.
• Unlike classic scripts, the defer attribute has no effect on module scripts—they are always deferred by default.

For a deeper dive into JS Modules, check out this resource by Mathias Bynens and me: JS Modules nomodule and crossorigin Attributes

The nomodule attribute provides backward compatibility by preventing execution in modern browsers that support ES modules, ensuring that only older browsers run the fallback script.

The crossorigin attribute determines whether a script can be fetched with credentials. This is crucial for handling security policies when loading scripts from different origins.

Combining Attributes for Optimal Behavior

These attributes are not mutually exclusive and can be combined for nuanced behaviors. For instance, specifying both async and defer allows older browsers (which support only defer) to fall back gracefully while modern browsers optimize execution accordingly.

Final Thoughts

Efficient JavaScript execution is all about understanding these attributes and applying them effectively to optimize rendering performance.

For more details on JavaScript engine internals, check out this deep dive. DebugBear also provides an excellent write-up on this topic: DebugBear article.