How Does JavaScript Script Loading and Execution Order Vary Across Inline, External, Async, Defer, and Dynamically Added Scripts?

Understanding the Loading and Execution Order of JavaScript Scripts

JavaScript execution order in web pages can be complex due to various ways to include external scripts and dynamic script addition. To clarify the intricacies, let's delve into the loading and execution order of JavaScript scripts based on different scenarios:

Inline vs. External Scripts

Regardless of whether it's inline code or a loaded external script from a URI, scripts are executed in the order of their appearance in the page during parsing. Therefore, inline scripts after external scripts wait for those external scripts to load and run.

Async Scripts

Async scripts, marked with the async attribute, execute in an unpredictable order. The browser loads them in parallel and runs them without regard to order.

Defer Scripts

Defer scripts, with the defer attribute, are loaded but held until parsing is complete. Then, they execute in the order encountered, preserving dependencies among deferred scripts.

Dynamically Added Scripts

Dynamic script insertion behavior varies across browsers. For example, Firefox defaults dynamically added script tags to async unless specified otherwise. Async scripts may execute immediately or after parsing.

Sequence of Execution

Considering the above, the sequence of execution for the scenario described in the original question is as follows:

• Initialization and script loading scripts in the (load and execute in order)
• First inline script in the loads a script dynamically (appears after the external scripts in the )
• Second inline script in the relies on the dynamically loaded script
• The dynamically loaded external script loads and executes in parallel (unpredictable order)
• The second inline script will execute only after the dynamically loaded script has executed successfully. This is because browsers generally prioritize the execution of scripts in the order they are encountered.

The above is the detailed content of How Does JavaScript Script Loading and Execution Order Vary Across Inline, External, Async, Defer, and Dynamically Added Scripts?. For more information, please follow other related articles on the PHP Chinese website!