Последовательность выполнения скриптов на клиентской стороне определяется порядком их появления в HTML-документе, использованием атрибутов async и defer в теге <script>, а также динамическим добавлением скриптов.
HTML-порядок:
Браузер выполняет скрипты в том порядке, в котором они встречаются в документе (<head> или <body>), если не используются атрибуты async или defer. Парсинг HTML приостанавливается до полного выполнения каждого скрипта.
Атрибуты:
async: Скрипт загружается асинхронно параллельно с парсингом HTML. Как только скрипт загружен, парсинг HTML приостанавливается, скрипт выполняется, а затем парсинг возобновляется. Порядок выполнения скриптов с async не гарантируется.
htmldefer: Скрипт загружается асинхронно параллельно с парсингом HTML. Выполнение скрипта откладывается до тех пор, пока весь HTML-документ не будет полностью разобран. Скрипты с defer выполняются в том порядке, в котором они указаны в HTML.
htmlСравнение:
| Атрибут | Загрузка скрипта | Выполнение скрипта | Порядок выполнения | Приостановка парсинга HTML |
|---|---|---|---|---|
| Без | Блокирует парсинг HTML | Сразу после загрузки | В порядке HTML | Да |
async | Асинхронно, не блокирует | Как только загружен (может блокировать парсинг) | Не гарантируется | Да (во время выполнения) |
defer | Асинхронно, не блокирует | После завершения парсинга HTML (DOMContentLoaded) | В порядке HTML | Нет |
Динамическое добавление:
Скрипты, добавляемые в DOM с помощью JavaScript (document.createElement('script'), element.appendChild()), по умолчанию загружаются и выполняются асинхронно. Если вам нужен синхронный или упорядоченный асинхронный способ, можно использовать callback-функции или промисы.
javascript