Расскажи подробнее про этапы рендеринга: layout (reflow) и paint (repaint)

Процесс рендеринга в браузере включает несколько этапов, среди которых важны layout (reflow) и paint (repaint).

• Layout (reflow) — этап, на котором браузер вычисляет размеры и позиционирование всех элементов на странице. Если изменились размеры, содержимое или стили, влияющие на геометрию, происходит перерасчёт расположения элементов.

• Paint (repaint) — этап, когда браузер рисует пиксели на экране, отрисовывая цвета, текст, тени и другие визуальные эффекты. Если изменились свойства, влияющие на внешний вид, но не на размеры (например, цвет текста), происходит repaint без reflow.

Избегать частых reflow и repaint важно для производительности, так как reflow более затратен. Например, изменение свойства width вызовет reflow, а изменение color — только repaint.