Как происходит отрисовка страницы

Браузер обрабатывает HTML, CSS и JavaScript для отрисовки страницы в несколько этапов:

1. Парсинг HTML – строится DOM-дерево.
2. Парсинг CSS – формируется CSSOM (CSS Object Model).
3. Объединение DOM и CSSOM – создаётся Render Tree (только видимые элементы).
4. Layout (Reflow) – вычисляются размеры и позиции элементов.
5. Paint – отрисовываются пиксели (растеризация).
6. Composite – слои объединяются в финальное изображение.

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

• Избегайте частых изменений стилей, вызывающих reflow (например, width).
• Используйте transform и opacity для анимаций – они не затрагивают Layout/Paint.

// Плохо – вызывает reflow
element.style.width = '100px';

// Лучше – использует Composite
element.style.transform = 'scale(1.5)';