Из каких структур состоит render tree?

Render tree — это структура, которую браузер использует непосредственно для отрисовки элементов на экране.

1) Какие структуры участвуют

Определение: Render tree — дерево визуальных элементов страницы, сформированное из DOM и CSSOM, содержащее только отображаемые узлы.

Перед его созданием браузер формирует две основные структуры:

1. DOM:

   • структура HTML-документа

   • содержит все узлы

2. CSSOM:

   • структура всех правил стилей

   • включает каскад и специфичность

2) Как формируется render tree

Процесс выглядит так:

1. DOM + CSSOM объединяются.

2. Для каждого элемента вычисляются финальные стили.

3. Элементы, которые не отображаются (display: none), исключаются.

4. Создаётся render tree.

3) Что содержит render tree

В отличие от DOM, render tree хранит:

1. Геометрию элементов:

   • размеры

   • позицию

2. Визуальные свойства:

   • цвет

   • фон

   • границы

4) Почему это важно

1. Layout рассчитывается именно по render tree.

2. Любые изменения, влияющие на геометрию, могут вызвать reflow.

3. Изменения только цвета или фона вызывают repaint.

Вывод: render tree — это “визуальная версия DOM”, содержащая только отображаемые элементы и их вычисленные стили.