Из каких этапов состоит отрисовка

1. Parsing HTML – браузер преобразует HTML в DOM (Document Object Model).
2. Parsing CSS – CSS разбирается в CSSOM (CSS Object Model).
3. Render Tree – DOM и CSSOM объединяются в Render Tree, содержащий только видимые элементы.
4. Layout (Reflow) – вычисляются размеры и позиции элементов (ширина, высота, координаты).
5. Painting – отрисовываются пиксели (заливка, границы, тени и т.д.).
6. Compositing – слои объединяются в финальное изображение (особенно важно для анимаций).

Пример:

// Изменение стиля может вызвать все этапы
element.style.width = '100px'; // Trigger layout → paint → composite

Оптимизация:

• Используйте transform и opacity (только compositing).
• Избегайте частых изменений, вызывающих reflow (например, чтение offsetHeight в цикле).