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

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

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

// Пример: изменение стиля вызывает reflow и repaint
const element = document.getElementById('example');
element.style.width = '200px'; // Запускает layout и paint

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

• Используйте transform и opacity для анимаций (они работают на этапе composite).
• Избегайте частых изменений геометрии (width, height, margin).