Загрузка JavaScript: обычный script, defer и модули
Как запускать код после разбора HTML и не нарушать порядок зависимостей.
Зачем это нужно
Время загрузки и выполнения скрипта влияет на доступность DOM и отображение страницы. Код, который ищет элемент слишком рано, может получить null. Большой блокирующий скрипт способен задержать разбор документа.
Выберите стратегию
Обычный внешний классический script без async/defer может остановить разбор HTML на время загрузки и исполнения. Defer загружает параллельно и выполняется после разбора документа с сохранением порядка отложенных классических скриптов.
Не путайте async с defer
Async выполняет скрипт по готовности и не гарантирует порядок между независимыми файлами. Он подходит для действительно независимого кода, но может сломать ожидание, что библиотека уже загружена.
Разделите код модулями
Type=»module» включает модульный режим, import/export и отложенное по умолчанию выполнение. Для локальной проверки модулей используйте HTTP-сервер: file-протокол имеет ограничения. Все импортируемые файлы должны быть доступны по корректным адресам.
Важное ограничение
Контрольная проверка
- Скрипт видит нужные DOM-элементы.
- Зависимости выполняются в правильном порядке.
- Нет ошибок импорта и MIME-типа.
- Страница остаётся полезной до загрузки кода.
Продолжить изучение: DOM, постепенное улучшение.