Как влияют теги script на парсинг HTML?

Question

Обычный тег <script> блокирует парсинг HTML, пока файл не загрузится и не выполнится. Атрибут defer позволяет продолжить парсинг и выполнить скрипт после построения DOM. Атрибут async загружает и выполняет скрипт независимо от DOM. Выбор режима влияет на скорость загрузки и порядок выполнения.

YeaHub · Accepted Answer

Теги script напрямую влияют на то, как браузер строит DOM и выполняет JavaScript.1) Поведение обычного scriptКогда браузер встречает: Происходит:Остановка парсинга HTML.Загрузка файла.Выполнение скрипта.Продолжение парсинга.Это называется parser blocking.2) Атрибут defer Особенности:HTML продолжает парситься.Скрипт выполняется после построения DOM.Порядок выполнения сохраняется.Используется для:основного кода приложенияинициализации интерфейса3) Атрибут async Особенности:Загружается параллельно.Выполняется сразу после загрузки.Порядок выполнения не гарантируется.Используется для:аналитикисторонних виджетов4) Почему это важноНеправильное подключение:Увеличивает время до первой отрисовки.Замедляет построение DOM.Ухудшает Core Web Vitals.Вывод: обычный script блокирует парсинг HTML, defer откладывает выполнение, async выполняется независимо и быстрее, но без гарантии порядка.