Script Execution

When are your scripts executed? How to control the order of execution? Let us explore all these.

Script Download and Execution
Part of Series: Critical Rendering Path
Table of Contents


Parser Bocking Scripts

Script tags without async or defer are parser-blocking.

When the parser encounters a <script> element, the browser needs to evaluate and execute the script before proceeding with parsing the rest of the HTML. This is by design, as scripts may modify or access the DOM during a time while it is still being constructed. (using document.write())

Blocked on CSS, Why?

A parser-blocking <script> must also wait for any in-flight render-blocking CSS resources to arrive and be parsed before the browser can execute it. This is also by design, as a script may access styles declared in the render-blocking style sheet (for example, by using element.getComputedStyle()).

Browser Optimization for parser blocking

Blocking the parser can have a huge performance cost—much more than just blocking rendering. For this reason, browsers will try to reduce this cost by using a secondary HTML parser known as the preload scanner to download upcoming resources while the primary HTML parser is blocked.

Oder of execution

Order of execution is guaranteed in blocking scripts and when using defer. This is not guaranteed when using async, since these scripts are executed as soon as they are downloaded.



Next In Series: Render tree construction