💻 Практические примеры

⚡ Минимальный рабочий пример

Меняя текст, цвет, размеры и видимость, вы можете увидеть, как браузер по-разному реагирует на изменения. Это и есть практический смысл DOM, CSSOM и render tree.

Рабочие примеры

В каждом примере сверху — реальный результат (то, что увидит браузер), снизу — код. Сравнивай превью между собой.

Пример 1. Один и тот же HTML без CSS и с CSS

DOM одинаковый в обоих случаях. Разный только CSSOM — и именно он меняет вид. Слева «голый» HTML, справа — с применёнными стилями.

Без CSS (стили браузера по умолчанию)
Заголовок
Обычный абзац текста.
ссылка
С CSS (применён CSSOM)
Заголовок
Обычный абзац текста.
ссылка → 
<!-- index.html: один и тот же DOM в обоих случаях -->
<h1>Заголовок</h1>
<p>Обычный абзац текста.</p>
<a href="#">ссылка</a>
/* style.css: меняем только CSSOM — DOM прежний */
.card {
  font-family: sans-serif;
  background: #0f766e;
  color: #ecfeff;
  padding: 1rem;
  border-radius: .5rem;
}

Пример 2. display:none убирает элемент из render tree

Скрытый через display: none блок вообще исчезает — места не занимает, как будто его нет. visibility: hidden оставляет «дыру»: узел в render tree есть, но не рисуется.

A
B (display:none)
C
D (visibility:hidden)
E
<!-- index.html -->
<div>A</div>
<div class="gone">B</div>
<div>C</div>
<div class="invisible">D</div>
<div>E</div>
/* style.css */
.gone      { display: none; }      /* нет в render tree: A и C сходятся вплотную */
.invisible { visibility: hidden; } /* в render tree есть: между C и E остаётся пустое место */
Заметь: B пропал бесследно, а на месте D осталась пустая «дыра» шириной с блок. Это и есть разница между «нет в render tree» и «есть, но не рисуется».

Пример 3. Reflow (layout) против repaint (paint)

Изменение width сдвигает соседей — нужен пересчёт layout. Изменение color ничего не двигает — достаточно repaint. Сравни две карточки: у обеих одинаковая разметка, отличается одно свойство.

width: 320px — изменение ширины двигает соседей → reflow
color изменён — геометрия та же → repaint
/* style.css */
.card-wide  { width: 320px; }  /* меняет геометрию → reflow (дорого) */
.card-color { color: #1d4ed8; } /* меняет только вид → repaint (дёшево) */

Пример 4. Как увидеть процесс в DevTools

Самый быстрый способ почувствовать конвейер — открыть инспектор и менять стили вживую.

  1. Откройте страницу в браузере и нажмите F12.
  2. Во вкладке Elements вы видите DOM; в панели Styles — применённые правила (CSSOM).
  3. Поменяйте color у элемента — страница обновится мгновенно (repaint).
  4. Поменяйте width — соседние блоки сдвинутся (reflow).
  5. Поставьте display: none — элемент исчезнет из потока (выпал из render tree).
Эксперимент: вкладка Performance показывает шаги Layout (фиолетовым) и Paint (зелёным) — можно буквально увидеть, какой шаг вызвала ваша правка.