Для чего скрипт подключают в конце тега body?

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

Основная причина — обеспечение доступности DOM-дерева перед выполнением скрипта.

Если скрипт манипулирует элементами DOM, например, получает ссылки на них по id или классу, необходимо, чтобы эти элементы уже существовали. Подключение скрипта в конце <body> гарантирует, что к моменту его выполнения браузер уже распарсил и построил структуру HTML-документа.

Другие причины:

Оптимизация скорости загрузки: Браузер может начать отображение страницы до того, как скрипты будут загружены и выполнены. Это создает ощущение более быстрой загрузки для пользователя.
Избежание "белого экрана": Если тяжелый скрипт блокирует рендеринг в <head>, пользователь может видеть пустую страницу до его завершения. Подключение в конце <body> позволяет сначала загрузить и отобразить контент.
Последовательность выполнения: В некоторых случаях важна последовательность выполнения скриптов, особенно если они зависят от других. Подключение внизу помогает упорядочить эту последовательность.

Существуют альтернативы, такие как атрибуты async и defer для тега <script>, которые позволяют контролировать загрузку и выполнение скриптов, сохраняя при этом оптимизации или обеспечивая доступность DOM.

Атрибут	Запуск скрипта	Зависимость от DOM
`async`	Во время парсинга (неблокирует)	Нет
`defer`	После парсинга (неблокирует)	Да

<!-- Пример подключения в head с defer -->
<head>
  <script src="script.js" defer></script>
</head>

<!-- Пример подключения в конце body -->
<body>
  <!-- Контент страницы -->
  <script src="script.js"></script>
</body>