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

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

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

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

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

Пример:

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

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