This content originally appeared on DEV Community and was authored by Rinon Tendrinomena
A browser builds a webpage step by step:
- Reads the HTML file top to bottom.
It converts the text into tokens, then into the DOM tree.
- If the browser encounters a
<script>tag without async or defer:
- It pauses HTML parsing immediately.
- Downloads the JavaScript file (if external).
- Executes that JavaScript. Only after execution finishes does it resume building the DOM.
Why does parsing stop?
Because JavaScript can modify the DOM or CSSOM while the page is loading.
For example:
<p id="greet">Hello</p>
<script>
document.getElementById("greet").innerText = "Hi from JS!";
</script>
If the browser kept parsing ahead, it might waste effort building nodes that JS will delete/change anyway.
So it waits to ensure accuracy.
⚡ Example Timeline:
Case 1: Parser-blocking script
<html>
<head>
<script src="big-script.js"></script> <!-- blocks parsing -->
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Browser starts parsing
<head>.Hits
<script>→ stops everything.Downloads + runs big-script.js.
4 After execution → continues parsing <body>.
Result: <h1> appears later, delaying rendering.
Case 2: Script with defer
<html>
<head>
<script src="big-script.js" defer></script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Browser keeps parsing DOM without stopping.
big-script.js downloads in background.
Executes only after DOM is fully parsed.
Page appears faster, no blocking.
So in short:
“JavaScript blocks parsing” means the browser halts HTML processing whenever it encounters a normal <script> tag until that script is fully executed.
This content originally appeared on DEV Community and was authored by Rinon Tendrinomena
Rinon Tendrinomena | Sciencx (2025-09-17T06:24:39+00:00) When JS blocks parsing your HTML. Retrieved from https://www.scien.cx/2025/09/17/when-js-blocks-parsing-your-html/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.