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

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

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

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

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

Пример плохой практики:

// Вызывает multiple reflows
element.style.width = '100px';
element.style.height = '200px';
element.style.left = '10px';

Лучше использовать classList или requestAnimationFrame для батчинга изменений.