📖 Теория: как браузер превращает код в страницу

⚡ Кратко

HTML строит DOM, CSS строит CSSOM, затем браузер объединяет их в render tree и вычисляет layout. После этого происходят paint и repaint, а изменения геометрии обычно вызывают reflow.

  • DOM - содержимое страницы.
  • CSSOM - правила оформления.
  • Render tree + layout + paint объясняют, почему браузер не рисует «в лоб».

Главная идея

Браузер не «открывает файл и показывает картинку». Между вашим кодом и пикселями на экране стоит конвейер из нескольких шагов. Браузер читает HTML и строит DOM (дерево элементов), читает CSS и строит CSSOM (дерево стилей), соединяет их в render tree (только видимые узлы), затем рассчитывает геометрию (layout) и, наконец, рисует пиксели (paint). Понимание этого конвейера — фундамент: с ним «лишние» тормоза и странное поведение вёрстки перестают быть магией.

Представь сборку мебели на фабрике. HTML → DOM — это список деталей: какие доски, полки и винты вообще есть. CSS → CSSOM — инструкция по покраске и размерам: какого цвета, какой толщины, что куда крепить. Render tree — мастер откладывает в сторону детали, которые в этой модели не используются (скрытые), и берёт только нужные. Layout — он размечает на столе, где какая деталь стоит и сколько занимает места. Paint — только теперь берёт кисть и красит готовое изделие. Перекрасить дверцу (paint) дёшево, а переставить все полки заново (layout) — долго.

Конвейер рендеринга целиком

Вот те же пять шагов в виде схемы. HTML и CSS идут параллельно, сходятся в render tree, дальше — строго по порядку:

HTML DOM CSS CSSOM Render tree только видимые узлы Layout размеры и позиции Paint пиксели на экране
HTML → DOM и CSS → CSSOM строятся параллельно, объединяются в render tree, затем layout рассчитывает геометрию и paint рисует пиксели.

DOM — что есть на странице

Когда браузер читает HTML, он строит внутреннее дерево объектов документа — DOM. Это не внешний вид и не пиксели, а структурная модель: какие элементы есть, как они вложены и какой у них текст. Изменить DOM из JavaScript — значит изменить саму структуру страницы.

CSSOM — как это должно выглядеть

Когда браузер читает CSS, он строит CSSOM — дерево правил стилей. Здесь описано, как именно элементы выглядят: размер, цвет, отступы, видимость. DOM отвечает на вопрос «что есть», CSSOM — «как это оформлено».

💡 Важная связка: ни DOM, ни CSSOM по отдельности ещё не дают картинку. Браузеру нужно соединить их вместе — только тогда он знает и что рисовать, и как.

Render tree — только видимое

Render tree строится только из узлов, которые реально должны быть показаны. Если элемент скрыт через display: none, в render tree он не попадает совсем — для отрисовки его как будто нет. А вот visibility: hidden оставляет узел в дереве: место он занимает, просто не рисуется. Эта разница — частая причина путаницы.

Layout, reflow и repaint

Layout (его же часто называют reflow) — расчёт размеров и положения элементов. Если меняется ширина, высота, отступы или состав блоков, браузеру приходится пересчитывать геометрию страницы — это сравнительно дорого, потому что сдвиг одного блока может потянуть за собой соседние.

Paint (он же repaint) — отрисовка пикселей. Если меняется только цвет текста или фон, геометрия прежняя, и браузер может обойтись перерисовкой без пересчёта layout. Поэтому изменить color почти бесплатно, а изменить width — заметно дороже.

⚠️ Проверить по документации: точные границы между layout, paint и compositing зависят от движка браузера и версии. В уроке используется общая учебная модель, которая верно передаёт логику типичных изменений вёрстки.

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

  • Помогает понимать, почему одна правка «дорогая» (layout), а другая почти бесплатная (paint).
  • Упрощает поиск причин тормозов на больших страницах.
  • Помогает не путать структуру документа (DOM), стили (CSSOM) и визуальный результат.