Как происходит рендеринг HTML-страницы

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

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

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

// Используйте requestAnimationFrame для анимаций
function animate() {
  element.style.transform = `translateX(${pos}px)`;
  pos++;
  requestAnimationFrame(animate);
}

Критические моменты:

• Изменение геометрии элемента вызывает reflow
• Изменение цвета/фона – только repaint
• transform/opacity – только composite (самый быстрый вариант)