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

Question

Render tree строится на основе DOM и CSSOM. В него попадают только те элементы, которые должны отображаться на странице, и для каждого вычисляются стили. Затем render tree используется для layout и последующей отрисовки. Элементы с display: none в render tree не попадают.

YeaHub · Accepted Answer

Render tree — это структура, которую браузер использует непосредственно для отрисовки элементов на экране.1) Какие структуры участвуютОпределение: Render tree — дерево визуальных элементов страницы, сформированное из DOM и CSSOM, содержащее только отображаемые узлы.Перед его созданием браузер формирует две основные структуры:DOM:структура HTML-документасодержит все узлыCSSOM:структура всех правил стилейвключает каскад и специфичность2) Как формируется render treeПроцесс выглядит так:DOM + CSSOM объединяются.Для каждого элемента вычисляются финальные стили.Элементы, которые не отображаются (display: none), исключаются.Создаётся render tree.3) Что содержит render treeВ отличие от DOM, render tree хранит:Геометрию элементов:размерыпозициюВизуальные свойства:цветфонграницы4) Почему это важноLayout рассчитывается именно по render tree.Любые изменения, влияющие на геометрию, могут вызвать reflow.Изменения только цвета или фона вызывают repaint.Вывод: render tree — это “визуальная версия DOM”, содержащая только отображаемые элементы и их вычисленные стили.