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

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

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

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

• Минимизируйте пересчеты layout (избегайте чтения layout свойств в циклах)
• Используйте transform и opacity для анимаций (они не триггерят layout/paint)

Пример плохой практики:

// Триггерит layout на каждой итерации
for(let i = 0; i < 100; i++) {
  element.style.width = i + 'px'; 
}