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

Браузер проходит несколько стадий отрисовки страницы:

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

Пример оптимизации:

// Плохо – вызывает reflow и repaint на каждой итерации
for (let i = 0; i < 100; i++) {
  element.style.width = i + 'px';
}

// Хорошо – использует requestAnimationFrame
function animate() {
  // Обновление стилей здесь
  requestAnimationFrame(animate);
}
animate();