Какие знаешь этапы отрисовки web-страницы

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

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

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

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

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