Что происходит при встрече тега

Question

Когда парсер HTML встречает тег  без атрибутов async или defer, он останавливает построение DOM, загружает и выполняет скрипт синхронно. Только после этого парсинг продолжается. Это может замедлить загрузку страницы, особенно если скрипт тяжёлый или находится в .

YeaHub · Accepted Answer

Блокирующее поведение тега scriptКогда браузер парсит HTML и встречает тег (без атрибутов async или defer), он немедленно останавливает построение DOM-дерева. Затем браузер загружает скрипт (если он внешний) и выполняет его синхронно. Только после завершения выполнения парсинг HTML возобновляется. Это сделано потому, что скрипт может изменить DOM с помощью document.write() или других методов.Пример

Этот текст появится только после выполнения скрипта

Влияние на производительностьТакое блокирующее поведение может существенно замедлить отображение страницы, особенно если скрипт находится в и имеет большой размер. Пользователь видит пустую страницу до завершения загрузки и выполнения скрипта. Для решения этой проблемы используют атрибуты async (скрипт загружается параллельно и выполняется сразу после загрузки) или defer (скрипт загружается параллельно, но выполняется только после завершения парсинга HTML).ВыводПонимание блокирующего поведения тега script критично для оптимизации загрузки веб-страниц. Размещайте скрипты в конце body или используйте async/defer, чтобы не задерживать отрисовку контента.

Что происходит при встрече тега <script> во время парсинга HTML?

Короткий ответ

Длинный ответ

Блокирующее поведение тега script

Что происходит при встрече тега <script> во время парсинга HTML?

Короткий ответ

Длинный ответ

Блокирующее поведение тега script