QuickFrontend
HTML

Что такое Render Tree и чем он отличается от DOM?

Render Tree

Дерево, которое браузер строит из DOM и CSSOM, чтобы знать что и как рисовать на экране.

Как строится

Браузер проходит по каждому узлу DOM:

  1. Пропускает невидимые: display:none, <head>, <script>, <meta>.
  2. Для каждого видимого находит стили из CSSOM.
  3. Создаёт узел Render Tree с вычисленными стилями.

Что НЕ входит

<head>...</head>               <!-- не рендерится -->
<div style="display:none">    <!-- не входит -->
<script>...</script>           <!-- не входит -->

Что входит, но невидимо

<div style="visibility:hidden">  <!-- ВХОДИТ, занимает место -->
<div style="opacity:0">          <!-- ВХОДИТ, занимает место -->

Reflow - дорогая операция

Изменение геометрии вызывает перерасчёт Layout.

// ❌ Reflow на каждой итерации (read + write)
for (let i = 0; i < items.length; i++) {
  items[i].style.width = container.offsetWidth + "px"
}

// ✅ Один read, потом все writes
const width = container.offsetWidth
for (let i = 0; i < items.length; i++) {
  items[i].style.width = width + "px"
}

Источники