Как браузер рендерит страницу

Браузер рендерит страницу поэтапно:

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

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

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

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

// Лучше – использует композицию
element.style.transform = 'scaleX(2)';