Вопросы React Frontend Developer

Event loop может приостанавливать парсинг HTML, если JavaScript выполняется во время загрузки страницы. Когда браузер встречает тег <script>, он останавливает парсинг и выполняет скрипт, что может замедлить загрузку страницы. Чтобы избежать этого, разработчики могут использовать атрибуты async или defer, которые позволяют загружать и выполнять скрипты асинхронно, не блокируя парсинг.

После получения HTML браузер начинает его разбирать и строить DOM. По ходу парсинга он находит ресурсы (CSS, JS, изображения, шрифты) и запускает их загрузку. Когда CSS загружен и распарсен, строится CSSOM, затем из DOM + CSSOM собирается дерево рендеринга. Дальше браузер рассчитывает размеры и позиции элементов (layout) и рисует их (paint), а затем может “склеивать” слои (composite). Скрипты и стили могут блокировать некоторые шаги, из-за чего первая отрисовка откладывается.

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

Браузер читает HTML-документ последовательно, символ за символом. Он разбивает текст на токены и на их основе создаёт узлы DOM. Каждый HTML-тег становится узлом дерева. В результате формируется иерархическая структура, отражающая вложенность элементов страницы.

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