Тег <script>: подключение кода и порядок выполнения
Элемент script подключает внешний JavaScript или содержит код внутри HTML-документа. Выбор атрибутов влияет на момент выполнения и доступность элементов страницы.
Назначение
Элемент script подключает внешний JavaScript или содержит код внутри HTML-документа. Выбор атрибутов влияет на момент выполнения и доступность элементов страницы.
Как это работает
Для внешнего классического скрипта defer позволяет продолжать разбор HTML во время загрузки и выполнить код после разбора документа. Несколько таких скриптов сохраняют порядок элементов script. Async подходит для независимого кода: порядок завершения загрузки заранее не определён.
Пример
<!doctype html>
<html lang="ru"><head><meta charset="utf-8"><title>Подключение скрипта</title>
<script src="/assets/app.js" defer></script></head>
<body><h1 id="status">Страница готова</h1></body></html>
<!-- Создайте assets/app.js отдельно и проверяйте страницу через HTTP. -->Что должно получиться
Браузер запрашивает app.js по указанному адресу. Код в этом файле сможет искать заголовок после разбора HTML. Сам пример не создаёт внешний файл: без него в Network будет 404.
Граница применения и частая ошибка
Defer не откладывает обычный встроенный скрипт без src. Модули имеют собственную модель загрузки и по умолчанию выполняются отложенно. Не подключайте незнакомые сторонние скрипты только ради удобства: они получают доступ к странице.
Самостоятельная проверка
Создайте app.js с изменением textContent заголовка. В Network проверьте статус и Content-Type файла, затем сравните размещение обычного скрипта в head с вариантом defer. На сайте код показан как текст, песочница JavaScript не запускает.