React Frontend Developer

Question 1

В каком порядке браузер строит DOM и CSSOM?

Accepted Answer

DOM строится по мере парсинга HTML — потоково, сверху вниз. CSSOM строится после загрузки и парсинга CSS-файлов, которые браузер находит в HTML. Эти процессы могут идти параллельно: DOM продолжает строиться, пока качается CSS. Но для создания Render Tree и первой корректной отрисовки обычно нужен уже готовый CSSOM, поэтому стили считаются блокирующими рендер.

Question 2

В какой момент браузер получает HTML и как формируются DOM и CSSOM?

Accepted Answer

HTML браузер получает после выполнения HTTP-запроса к серверу. Сразу после получения он начинает парсинг документа. В процессе парсинга формируется DOM-дерево. Параллельно браузер загружает CSS и строит CSSOM. Эти структуры используются для дальнейшего рендеринга страницы.

Question 3

Что такое CSSOM и как он взаимодействует с DOM?

Accepted Answer

CSSOM (CSS Object Model) — это объектная модель CSS, аналогичная DOM для HTML. Браузер строит CSSOM из CSS-правил, а затем объединяет его с DOM в render tree для отрисовки страницы. Без CSSOM браузер не знает, как стилизовать элементы, поэтому построение CSSOM блокирует рендеринг.

Question 4

Как браузер работает с CSS?

Accepted Answer

Браузер загружает HTML и CSS, парсит их в DOM и CSSOM. Затем объединяет их в дерево рендеринга, вычисляет геометрию элементов (layout) и отрисовывает пиксели на экране (paint). Этот процесс называется критическим путём рендеринга.

Question 5

Строится ли DOM-дерево независимо от CSS, или они зависят друг от друга?

Accepted Answer

DOM и CSSOM строятся независимо друг от друга, но для построения render tree (дерева рендеринга) они объединяются. Браузер парсит HTML и CSS параллельно, однако JavaScript может блокировать построение DOM, если он ожидает загрузки CSS. Render tree строится только после того, как оба дерева готовы.

Вопросы React Frontend Developer