Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про HTML: blocking, script

Как влияет синхронная загрузка скриптов на рендеринг страницы?

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

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

Синхронные скрипты блокируют парсинг HTML до момента их загрузки и выполнения. Пока скрипт не выполнится, браузер не может продолжить построение DOM. Это замедляет первый рендер страницы и может вызывать задержки отображения контента. Чем больше таких скриптов, тем хуже воспринимаемая производительность.

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

По умолчанию все скрипты в HTML загружаются синхронно, если не указаны специальные атрибуты.

Что означает синхронная загрузка

Синхронная загрузка означает, что браузер:

  • останавливает парсинг HTML

  • загружает JavaScript-файл

  • выполняет код

  • только после этого продолжает обработку HTML

Почему это блокирует рендеринг

  1. Остановка парсинга DOM
    Пока скрипт не выполнен, DOM-дерево не может быть построено полностью.

  2. Блокировка render tree
    Без DOM и CSSOM браузер не может сформировать render tree.

  3. Задержка первого отображения
    Пользователь дольше видит пустую страницу или частично загруженный контент.

Пример

<script src="heavy.js"></script>
<p>Контент страницы</p>

Текст внутри <p> не будет обработан, пока heavy.js не загрузится и не выполнится.

Практические рекомендации

  1. Использовать defer для основного кода

  2. Выносить критичные скрипты в конец HTML

  3. Минимизировать и объединять JavaScript-файлы

Вывод

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

Уровень

  • Рейтинг:

    5

  • Сложность:

    5

Навыки

  • HTML

    HTML

Ключевые слова

#blocking

#script

Подпишись на React Developer в телеграм