| Phase | Description |
|---|---|
| HTML Parsing | The browser parses HTML from top to bottom, constructing the DOM tree. |
| CSS Parsing | External and inline styles are parsed into the CSSOM (CSS Object Model). |
| JavaScript Execution | JavaScript can pause HTML parsing and manipulate the DOM. |
| Render Tree Construction | The DOM and CSSOM are combined into the render tree. |
| Layout (Reflow) | The browser calculates the position and size of each element. |
| Paint | Pixels are drawn to the screen. |
<script> or <link> (if synchronous)| Resource Type | Blocks Parsing | Blocks Paint | Notes |
|---|---|---|---|
<script> (no defer/async) |
Yes | Yes | Pauses HTML parsing until the script is downloaded and executed. |
<link rel="stylesheet"> |
No | Yes | Parsing continues, but painting is delayed until styles are ready. |
<script defer> |
No | No | Executes after HTML is fully parsed, in order. |
<script async> |
No | No | Executes as soon as downloaded, out of order. |
| Script Type | Blocks HTML Parsing | Execution Timing | Use Case |
|---|---|---|---|
Inline <script> |
Yes | Immediately | Minimal logic that must run early |
<script> (default) |
Yes | Immediately (synchronous) | Theme setup, critical blocking logic |
<script defer> |
No | After HTML is parsed (ordered) | Main application logic |
<script async> |
No | When downloaded (unordered) | Analytics, ads, third-party scripts |