Последовательность загрузки скрипта JavaScript - PullRequest
Новая
       8

Последовательность загрузки скрипта JavaScript

0 голосов
/ 15 октября 2019

Я получил ссылку на это изображение script loading

Но в следующем сценарии, даже если JavaScript находится в нижней части html-файла, он сначала загружается и анализируется, а затем HTML-кодпоказано, я немного запутался - 

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Loader Sequence</title>
    <link rel="stylesheet" type="text/css" href="style/style1.css">
</head>
<body>
    <p>HTML parse and render</p>
    <img style="max-width: 70%; height: auto; border: 1px solid red;" src="https://i.stack.imgur.com/wfL82.png">
    <p>
        There ain't no grave can hold my body down
        There ain't no grave can hold my body down
        When I hear that trumpet sound I'm gonna rise right out of the ground
        Ain't no grave can hold my body down
    </p>
</body>
<script type="text/javascript">
    alert('Last Appearance');
    setTimeout(function(){ alert('Last appearance 5000 ms') }, 5000);
</script>
</html>

1 Ответ

1 голос
/ 15 октября 2019

В вашем примере скрипты встроены, поэтому на самом деле ничего не загружается. Но скрипт выполняется после того, как остальная часть HTML закончила загрузку.
Вот, возможно, более ясный пример: 

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Loader Sequence</title>
    <link rel="stylesheet" type="text/css" href="style/style1.css">
    <script type="text/javascript">
      alert('Head script\nThe body does not show yet');
    </script>
</head>
<body>
    <p>HTML parse and render</p>
    <img style="max-width: 70%; height: auto; border: 1px solid red;" src="https://i.stack.imgur.com/wfL82.png">
    <p>
        There ain't no grave can hold my body down
        There ain't no grave can hold my body down
        When I hear that trumpet sound I'm gonna rise right out of the ground
        Ain't no grave can hold my body down
    </p>
</body>
<script type="text/javascript">
    alert('Bottom script\nThe body has been rendered');
</script>
</html>

Другой пример доступа к DOM до и после его загрузки: 

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Loader Sequence</title>
    <link rel="stylesheet" type="text/css" href="style/style1.css">
    <script type="text/javascript">
      // Here the paragraph has not been parsed yet and does not exist in the DOM
      alert(document.getElementById('johnnycash') && document.getElementById('johnnycash').innerText);
    </script>
</head>
<body>
    <p>HTML parse and render</p>
    <img style="max-width: 70%; height: auto; border: 1px solid red;" src="https://i.stack.imgur.com/wfL82.png">
    <p id="johnnycash">
        There ain't no grave can hold my body down
        There ain't no grave can hold my body down
        When I hear that trumpet sound I'm gonna rise right out of the ground
        Ain't no grave can hold my body down
    </p>
</body>
<script type="text/javascript">
    // Here the paragraph has been parsed and exists in the DOM
    alert(document.getElementById('johnnycash') && document.getElementById('johnnycash').innerText);
</script>
</html>
...