Что такое отрисовка

Отрисовка (рендеринг) — это процесс преобразования кода (HTML, CSS, JavaScript) в визуальное представление на экране. Включает несколько этапов:

1. DOM-дерево: Браузер парсит HTML и строит DOM.
2. CSSOM: Анализирует стили, создаёт CSSOM.
3. Render Tree: Объединяет DOM и CSSOM.
4. Layout (Reflow): Вычисляет позиции и размеры элементов.
5. Paint: Отрисовывает пиксели (цвета, тени и т.д.).
6. Composite: Собирает слой для GPU (анимации, transform).

Пример:

// Изменение стиля → рефлоу + репаинт
element.style.width = '200px'; 
// Оптимизация: используй transform (только композитинг)
element.style.transform = 'translateX(100px)';

Оптимизация: минимизируй reflow (изменение геометрии) и repaint (изменение внешнего вида).