Когда браузер разбирает HTML, встречающиеся теги
<script> могут блокировать дальнейшее построение DOM, что влияет на производительность страницы. И вот как это работает:1️⃣ Синхронные скрипты (
<script>, без async или defer) — блокируют построение DOM до своей загрузки и выполнения. Это замедляет рендеринг страницы.2️⃣ Асинхронные скрипты (async) агружаются параллельно с HTML, но выполняются сразу, как только файл загружен. Порядок их выполнения непредсказуем и может прервать рендеринг страницы.
3️⃣ Скрипты с defer загружаются параллельно, но выполняются после полного парсинга HTML, в том же порядке, в котором они встречаются в документе.
4️⃣ Модульные скрипты (type="module") загружаются как
defer, но имеют строгий режим и поддерживают import/export. Они выполняются после загрузки HTML и поддерживают top-level await.5️⃣ Динамические скрипты (через document.createElement('script')) ведут себя как async по умолчанию.
👩🎓 Немного рекомендаций:
✔️ Используй
defer для большинства скриптов, чтобы они не блокировали рендеринг;✔️ Для независимых скриптов (например, аналитики) используй
async;✔️ Минимизируй количество синхронных скриптов в
<head> — это замедляет загрузку страницы.И помним, скрипты могут блокировать не только DOM, но и рендеринг страницы, влияя на скорость загрузки и пользовательский опыт, поэтому правильное использование async и defer ускоряет загрузку и рендеринг. 👍