Как браузер отрисовывает HTML

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

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

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

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

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

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

Важно: JavaScript может блокировать парсинг HTML, если не помечен как async/defer.