Why is it that the script tag with blocking code written inside doesn't let DOM render first when you put it at the bottom?

the confusion encountered when reading JS Red Treasure Book. The rest of the page will not be loaded or displayed by the browser until the interpreter has evaluated all the code inside the < script > element. I don"t understand this sentence.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>
</head>

<body>

    <h1>There are some html codes...</h1>
    <h2>There are some html codes...</h2>
    <h3>There are some html codes...</h3>

</body>

</html>
<script>
    function fun() {
        alert("There are some javascript codes")
    }
    alert("There are some other javascript codes")
    fun()
</script>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
</head>

<body>

    <h1>There are some html codes...</h1>
    <h2>There are some html codes...</h2>
    <h3>There are some html codes...</h3>

</body>
<script src="./js/1.js"></script>
<script src="./js/2.js"></script>

</html>

the above two pieces of code JS are alert blocking. The first time you load the last paragraph of the page, you can see that the previous paragraph of the DOM content cannot.

if the previous piece of code is not finished and the DOM is not parsed, why does DOM parse it first when the latter code encounters the script tag and loads into the parsing JS file to find that it is blocking the code?

May.07,2021

your script tag location is different

Menu