Why does the JavaScript page display the alert () box first instead of the page element first?

display order
1. Display the prompt box (the page is blank at this time)
2. HelloWorld is displayed normally after the click is determined

<body>
    <script>
        document.write("<h1>HelloWorld</h1>");
        document.write("<h1>HelloWorld</h1>");
        alert("");
    </script>
</body>

Why does the page display the alert () box first instead of HelloWorld, first? my code is clearly written on it by HelloWorld?

Nov.16,2021

alert blocks threads, including GUI threads for page rendering
for you, I'm describing the fact that your dom has been rendered for a short time, and then the process is blocked
.

Chestnut: for example, one day you go to a restaurant and tell the boss that you want hot pot. On his way to serve hot pot for you, you go out to answer the phone and he has already brought up the hot pot (but you don't see it, you won't see it until you go in) ( blocking )

    document.write("<h1>HelloWorld</h1>");
    document.write("<h1>HelloWorld</h1>");
    setTimeout(function(){alert("")},1000) //,

you can think of the first two sentences as asynchronous, while alert is a blocking thread of Synchronize


https://stackoverflow.com/que.


rendering pages are executed at the end of an event loop, and execution and rendering are separated. So first alert


alert will block the process

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b322ae-2bde8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b322ae-2bde8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?