Когда происходит рендеринг

Рендеринг в вебе происходит в несколько этапов:

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

Рендеринг запускается:

• При загрузке страницы
• При изменении DOM (добавление/удаление элементов)
• При изменении стилей (через JS или CSS-анимации)
• При изменении размеров окна

Пример, вызывающий ререндеринг:

// Изменение стиля вызовет repaint
element.style.color = 'red'; 

// Изменение геометрии вызовет reflow + repaint
element.style.width = '100px';

Оптимизация: минимизировать reflow, используя transform и opacity для анимаций.