Comprehensive Analysis of JavaScript Script Loading and Execution Order

Fundamental Principles of Script Execution Order

In web development, the execution order of JavaScript scripts directly impacts application stability and predictability. When browsers parse HTML documents, encountering <script> tags triggers corresponding loading and execution processes. For scripts without either defer or async attributes, whether externally referenced or inline code, they execute sequentially in the order they appear in the document.

Consider this typical scenario:

<script src="utils.js"></script>
<script>
    console.log('Inline script execution');
</script>

In this case, the browser first loads and executes utils.js, then executes the inline script. Even if the external script requires significant loading time, the inline script waits for its completion before execution.

Execution Characteristics of Async Scripts

Scripts marked with async possess unique execution characteristics. These scripts do not block document parsing during loading, but their execution order is completely unpredictable. The browser downloads all async scripts in parallel and executes each immediately upon loading completion, regardless of their appearance order in the document.

The following example demonstrates async script uncertainty:

<script async src="script1.js"></script>
<script async src="script2.js"></script>

Since both scripts load asynchronously, script2.js might execute before script1.js, even though it appears later in the document. This characteristic makes async scripts unsuitable for scenarios with dependency requirements.

Execution Mechanism of Defer Scripts

Unlike async scripts, scripts marked with defer provide more controlled execution order. These scripts execute sequentially in their document appearance order after document parsing completes. This mechanism is particularly suitable for multiple scripts with dependencies.

Consider this defer script example:

<script defer src="library.js"></script>
<script defer src="app.js"></script>

In this example, even if app.js loads first, it waits for library.js execution before running, because defer scripts maintain their relative order from the document.

Behavior Analysis of Dynamic Script Insertion

Script elements inserted dynamically through JavaScript exhibit special execution characteristics. In modern browsers, dynamically created scripts default to async behavior unless explicitly set with async=false.

The following code demonstrates dynamic script insertion:

const script = document.createElement('script');
script.src = 'dynamic.js';
document.body.appendChild(script);

In modern browsers like Firefox, this dynamically inserted script executes asynchronously, with unpredictable execution timing. To ensure execution order, developers should use onload events to coordinate dependencies.

Detailed Specifications in HTML5

The HTML5 specification provides precise definitions for script execution order. According to the specification, script execution follows specific priority rules:

• Scripts with src attribute, defer attribute, and parser-inserted are added to the queue executing after document parsing completes
• Parser-inserted scripts without async attribute become pending parsing-blocking scripts
• Inline scripts without src attribute also become parsing-blocking scripts under certain conditions

The specification also defines a "execute as soon as possible" script list mechanism, ensuring certain scripts execute immediately at appropriate times.

Special Handling of Module Scripts

ES6 module scripts (type="module") possess automatic defer execution characteristics. Even without explicit defer attribute setting, module scripts execute in order after document parsing completes.

Module script example:

<script type="module" src="module1.mjs"></script>
<script type="module" src="module2.mjs"></script>

These two module scripts load in parallel but execute sequentially, with module1.mjs always executing before module2.mjs. Adding async attribute to module scripts removes this order guarantee.

Cross-Browser Compatibility Considerations

Different browsers exhibit variations in script execution order implementation. Particularly for dynamically inserted scripts, older browser versions may show different behaviors:

• Script-inserted scripts execute asynchronously in IE and WebKit
• Opera and pre-4.0 Firefox execute dynamically inserted scripts synchronously
• Modern browsers generally follow HTML5 specifications, though implementation details may vary

Developers should ensure cross-browser consistency through feature detection and appropriate fallback strategies.

Practical Application Scenarios and Best Practices

In actual development, reasonable script loading strategies can significantly enhance application performance. Here are some recommended best practices:

For critical above-the-fold rendering scripts, use inline or synchronous loading:

<script>
    // Critical initialization code
    initializeCoreFeatures();
</script>

For non-critical libraries and utility scripts, recommend deferred loading:

<script defer src="analytics.js"></script>
<script defer src="tracking.js"></script>

For independent, dependency-free components, consider asynchronous loading:

<script async src="social-widget.js"></script>

By appropriately combining these loading strategies, developers can optimize page loading performance while ensuring functional correctness.