HTML before an alert is not shown

Question

In Chrome, the following code does not display the <h1>Hello</h1> until after the alert is shown and the user clicks ok. However, in Firefox the expected sequence happens, <h1>Hello</h1> is displayed and then the alert appears.

<h1>Hello</h1>
<script>
  alert('Hello is displayed after this alert')
</script>

I'm curious why Hello shows up after the alert is closed in Chrome. Is that what's supposed to happen? Is the HTML/JavaScript spec simply unclear and Chrome just never bothered to make this intuitive? Is it a bug in Chrome?

Answer 1

The browser has a single thread for rendering HTML + CSS and JavaScript execution. As long as alert is a synchronous call, it blocks this thread.

Looks like Firefox interprets the alert call to be happening after initial rendering (in fact it does not execute this script but pushes it to the event loop) while Chrome executes JavaScript within the rendering process. This could make sense if you use document.write in your script, this is kinda smoothly adding the new items to the DOM before rendering it as a whole.

As a result I would say it is an improvement because the rendering is skipped until you decide what to show; plus it is not anyhow critical - normally you should never use a blocking thread operator while loading the page.