🔖 Справочник терминов браузерного пайплайна

⚡ Краткий справочник

  • DOM - дерево HTML-узлов.
  • CSSOM - дерево правил стилей.
  • reflow / layout - пересчёт геометрии.
  • repaint - перерисовка пикселей без обязательного пересчёта размеров.

Ключевые термины

Термин Коротко Что помнить
DOM Структура HTML Это не картинка, а дерево узлов
CSSOM Структура CSS Браузер собирает правила стилей в отдельную модель
render tree Видимые узлы + стили Скрытые через display:none элементы сюда не попадают
layout / reflow Расчёт размеров и позиций Меняется геометрия - нужен reflow
paint / repaint Отрисовка пикселей Меняется цвет или фон - часто достаточно repaint

Что смотреть в DevTools

  • Elements - увидеть DOM и CSS-правила.
  • Computed - понять, какие стили реально применились.
  • Performance - увидеть, что происходит с layout и paint.

Файл: subjects/html-css/course/lessons/02-browser-rendering/commands.html

HTML → DOM
CSS  → CSSOM
DOM + CSSOM → render tree
layout → repaint