JavaScript с нуля
- Автор: Кирупа Чиннатамби
- Жанр: Образование
- Дата выхода: 2021
- Цикл: Библиотека программиста
Читать книгу "JavaScript с нуля"
Сценарии и их расположение в DOM
В главе 8 мы рассмотрели различные способы для определения положения сценариев внутри документа. Вы видели, что положение элементов в DOM влияет на момент запуска. В этом разделе подтвердим эту простую истину и немного углубимся.
Вспомним, что простой элемент сценария может быть встроенным кодом в какой-то части документа:
<script>
let number = Math.random() * 100;
console.log("A random number is: " + number);
</script>
Он также может быть чем-то, что ссылается на некий код во внешнем файле:
<script src="/foo/something.js"></script>
А теперь важная деталь относительно этих элементов. Ваш браузер считывает DOM последовательно сверху вниз. Любые элементы сценария, встречающиеся на его пути, будут считаны в том порядке, в каком они расположены в DOM.
Ниже приведен очень простой пример со множеством элементов сценария:
<!DOCTYPE html>
<html>
<body>
<h1>Example</h1>
<script>
console.log("inline 1");
</script>
<script src="external1.js"></script>
<script>
console.log("inline 2");
</script>
<script src="external2.js"></script>
<script>
console.log("inline 3");
</script>
</body>
</html>
Не важно, содержит ли сценарий встроенный код или ссылается на внешний источник, — все сценарии рассматриваются одинаково и запускаются в том порядке, в котором расположены в документе. В верхнем примере порядок выполнения сценариев будет следующим: inline 1, external 1, inline 2, external 2 и в конце inline 3.
А вот еще одна, но уже очень важная деталь, которую необходимо учитывать. Так как DOM считывается сверху вниз, ваш элемент сценария имеет доступ ко всем элементам DOM, которые уже были считаны. И наоборот, ваш сценарий не имеет доступа к еще не считанным элементам DOM. Как вам такое?
Предположим, есть элементы сценария, расположенные внизу страницы чуть выше закрывающего тело элемента:
<!DOCTYPE html>
<html>
<body>
<h1>Example</h1>
<p>
Quisque faucibus, quam sollicitudin pulvinar dignissim, nunc
velit sodales leo, vel vehicula odio lectus vitae mauris. Sed
sed magna augue. Vestibulum tristique cursus orci, accumsan
posuere nunc congue sed. Ut pretium sit amet eros non consectetur.
Quisque tincidunt eleifend justo, quis molestie tellus venenatis
non. Vivamus interdum urna ut augue rhoncus, eu scelerisque
orci dignissim. In commodo purus id purus tempus commodo.
</p>
<button>Click Me</button>
<script src="something.js"></script>
</body>
</html>
Когда выполняется something.js, он может обратиться ко всем элементам DOM, находящимся над ним, вроде h1, p и button. Если ваш элемент сценария расположен в верхней части документа, он не будет знать о других элементах DOM, расположенных ниже него:
<!DOCTYPE html>
<html>
<body>
<script src="something.js"></script>
<h1>Example</h1>
<p>
Quisque faucibus, quam sollicitudin pulvinar dignissim, nunc
velit sodales leo, vel vehicula odio lectus vitae mauris. Sed
sed magna augue. Vestibulum tristique cursus orci, accumsan
posuere nunc congue sed. Ut pretium sit amet eros nonconsectetur.
Quisque tincidunt eleifend justo, quis molestie tellus venenatis
non. Vivamus interdum urna ut augue rhoncus, eu scelerisque
orci dignissim. In commodo purus id purus tempus commodo.
</p>
<button>Click Me</button>
</body>
</html>
При размещении элемента сценария внизу страницы, как было показано ранее, его конечное поведение будет таким же, будто есть код, явно слушающий событие DOMContentLoaded. Если вы сможете сделать так, что сценарии появятся ближе к концу документа, после всех элементов DOM, то полностью избежите использования подхода DOMContentLoaded, описанного в предыдущем разделе. Итак, если вам действительно нужно расположить элементы сценария в верхней части DOM, обеспечьте, чтобы весь код, опирающийся на DOM, выполнялся после срабатывания события DOMContentLoaded.
В этом вся суть. Я большой поклонник размещения элементов сценария в нижней части DOM. Есть и еще одна причина кроме упрощенного доступа к DOM, почему я рекомендую располагать сценарии внизу страницы. Когда элемент сценария считывается, браузер приостанавливает выполнение всего остального на странице на время выполнения его кода. Если речь идет о длительно выполняемом сценарии или внешнем сценарии, требующем время на загрузку, HTML-страница будет попросту заморожена. Если же на этот момент ваша DOM будет считана лишь частично, то страница помимо остановки еще и будет выглядеть незавершенной. А это вряд ли кому-то понравится.
