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

Question

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

YeaHub · Accepted Answer

По умолчанию все скрипты в HTML загружаются синхронно, если не указаны специальные атрибуты.Что означает синхронная загрузкаСинхронная загрузка означает, что браузер:останавливает парсинг HTMLзагружает JavaScript-файлвыполняет кодтолько после этого продолжает обработку HTMLПочему это блокирует рендерингОстановка парсинга DOMПока скрипт не выполнен, DOM-дерево не может быть построено полностью.Блокировка render treeБез DOM и CSSOM браузер не может сформировать render tree.Задержка первого отображенияПользователь дольше видит пустую страницу или частично загруженный контент.Пример

Контент страницы

Текст внутри

не будет обработан, пока heavy.js не загрузится и не выполнится.Практические рекомендацииИспользовать defer для основного кодаВыносить критичные скрипты в конец HTMLМинимизировать и объединять JavaScript-файлыВыводСинхронные скрипты сильно влияют на скорость рендеринга и должны использоваться только там, где это действительно необходимо.