Когда происходит render в браузере

Рендер в браузере — это процесс преобразования HTML, CSS и JavaScript в визуальное представление на экране. Он состоит из нескольких этапов:

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

Рендер происходит:

• При первоначальной загрузке страницы
• При изменении DOM (через JS или динамические данные)
• При изменении стилей (например, через element.style)
• При изменении размеров окна (resize)
• При скролле (если есть sticky-элементы)

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

const element = document.getElementById('myElement');
element.style.color = 'red'; // Изменение стиля → ререндер

Оптимизация: минимизировать рефлоу (layout) и репинт, используя transform и opacity (они работают на этапе composite).