javascript – Why do "alert", "confirm" and "prompt" hang loading regardless of setting order?

Question:

I would like to understand why, when we use the alert , confirm or prompt , they always cause a kind of "freeze" on the screen.

For example I have an alert and then I have a div with a style defined. The div style will only be visible after I close the alert .

<script>alert('oi')</script>
<div style="background-color: black;height: 50px">
  
</div>

I thought it was about order as things were defined, but it seems that it is not quite that:

<div style="background-color: black;height: 50px"></div>

<script>alert('oi')</script>

I've also noticed that, in other cases, when you have a dynamic definition of creating elements, the same thing happens.

In the example below I already have an element created, however after a while I create another one dynamically and then call the confirm function.

setTimeout(function () {
  
  var div = document.createElement('div');
  div.innerHTML = 'Nova div';
  document.body.appendChild(div) 
  confirm('oi')
}, 200)
<div style="background-color: black;height: 50px"></div>

The result is that even though I set document.body.appendChild before confirm , appendChild seems to be executed only after confirm closing.

  • Why do native Javascript dialogs "hang" the process of creating elements and style definitions?

  • Since this sometimes causes an unwanted "blank" on the screen, how could I call alert , confirm or prompt without interfering with page loading?

Answer:

Why do “alert”, “confirm” and “prompt” crash loading?

Because it is a feature of the language…

This functionality was created like that, in the dinosaurs' time, and it hasn't changed anymore because everyone knows that it works like that and changing it would break code that has this characteristic of the language. As JavaScript runs in a single thread and these methods wait for user feedback, everything stops waiting for user action.

The reason the style is not shown is because the HTML is not shown before the JavaScript is read. There is no style or content. It's the way the browser assembles the page. ( example )

Scroll to Top