Любой ли скрипт блокирует парсинг HTML

2.0 Middle🔥 153 комментариев

#HTML и CSS#Оптимизация и производительность

Комментарии (3)

🐱

deepseek-v3.2PrepBro AI4 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Механизм парсинга HTML и выполнение скриптов

Нет, не любой скрипт блокирует парсинг HTML. Это распространённое упрощение, но реальность сложнее. Блокировка зависит от типа скрипта, его места расположения в документе и атрибутов, которые на него установлены.

Когда скрипт БЛОКИРУЕТ парсинг HTML?

По умолчанию, классический синхронный <script> без специальных атрибутов, расположенный в <head> или в начале <body>, действительно блокирует парсинг HTML.

Почему это происходит? Когда браузер встречает такой тег <script> во время парсинга, он должен:

Немедленно остановить построение DOM (Document Object Model).
Загрузить файл скрипта (если он внешний, src="...").
Выполнить скрипт полностью.
Только потом возобновить парсинг оставшейся части HTML.

Пример блокирующего скрипта:

<!DOCTYPE html>
<html>
<head>
    <title>Пример</title>
    <!-- Парсинг остановится здесь, пока не загрузится и не выполнится script.js -->
    <script src="heavy-script.js"></script>
</head>
<body>
    <!-- Контент ниже будет отрисован с задержкой -->
    <h1>Мой сайт</h1>
</body>
</html>

Если такой скрипт загружается медленно или выполняет долгие вычисления, пользователь увидит пустой белый экран до его завершения.

Когда скрипт НЕ блокирует парсинг?

Современные браузеры предоставляют несколько способов отложить или сделать асинхронной загрузку и выполнение скриптов.

1. Атрибут `async`

Скрипт с async загружается асинхронно, не блокируя парсинг HTML. Однако, как только загрузка завершена, выполнение скрипта БЛОКИРУЕТ парсинг на время своего выполнения.

<script src="script.js" async></script>

Загрузка: Не блокирует парсинг.
Выполнение: Блокирует парсинг в момент своего запуска.

2. Атрибут `defer`

Скрипт с defer также загружается асинхронно. Его выполнение откладывается до момента, когда весь HTML-документ полностью распарсен (но до события DOMContentLoaded).

<script src="script.js" defer></script>

Загрузка: Не блокирует парсинг.
Выполнение: Происходит после полного парсинга HTML, в порядке объявления скриптов.

3. Динамическое добавление скрипта через JavaScript

Скрипт, созданный и добавленный в DOM с помощью JavaScript (document.createElement('script')), по умолчанию ведёт себя как async.

const script = document.createElement('script');
script.src = 'dynamic.js';
document.head.appendChild(script); // Загрузка начнётся асинхронно

4. Скрипты типа `module`

Модульные скрипты (type="module") по умолчанию выполняются с поведением, аналогичным defer. Их можно комбинировать с async.

<script type="module" src="app.js"></script>

Ключевые выводы и практические рекомендации

Скрипты в конце <body>: Самый старый приём. Размещайте блокирующие скрипты прямо перед </body>. К этому моменту визуальная часть DOM уже построена.
defer для зависимостей: Используйте для скриптов, которым нужен полный DOM, и которые должны выполняться в строгом порядке (например, библиотеки и код, от них зависящий).
async для независимых скриптов: Идеально для аналитики, рекламных виджетов, счётчиков — скриптов, чьё время выполнения не критично для отображения страницы и которые не зависят от других скриптов.
Критический CSS и JS в <head>: Код, необходимый для отрисовки "первого экрана" (above-the-fold), можно встраивать инлайново (inline), чтобы избежать задержек. Остальное — откладывать.

Итог: Парсинг HTML блокируется не фактом наличия скрипта, а его синхронным выполнением. Используя атрибуты async, defer, модули и динамическое добавление, разработчик получает полный контроль над тем, как и когда скрипты взаимодействуют с процессом построения страницы, что напрямую влияет на производительность и скорость загрузки веб-приложения. Оптимизация стратегии загрузки скриптов — одна из важнейших задач фронтенд-разработки.

Мой сайт