DEV Community

Cover image for When JS blocks parsing your HTML
Rinon Tendrinomena
Rinon Tendrinomena

Posted on

When JS blocks parsing your HTML

#webdev #beginners #javascript

A browser builds a webpage step by step:

  1. Reads the HTML file top to bottom.

It converts the text into tokens, then into the DOM tree.

  1. 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

  1. Browser starts parsing <head>.

  2. Hits <script> → stops everything.

  3. 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>
Enter fullscreen mode Exit fullscreen mode

  1. Browser keeps parsing DOM without stopping.

  2. big-script.js downloads in background.

  3. 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.

Top comments (0)