Какие причины перерисовки элемента встречаются чаще всего и как их диагностировать?

Частые причины перерисовки (repaint/reflow): изменение размеров/позиций (reflow), стилей (repaint), содержимого DOM, чтение геометрии. Диагностируют через DevTools Performance/Rendering.

Частые причины

Reflow (пересчёт геометрии) — дороже

• Изменение размеров/позиций (width, height, margin, top).
• Добавление/удаление DOM-узлов.
• Изменение содержимого, влияющего на размеры.
• Изменение шрифтов, размера окна.
• Чтение геометрии (offsetHeight, getBoundingClientRect) — принудительный синхронный reflow.

Repaint (перерисовка пикселей)

• Изменение color, background, box-shadow, visibility.

В React — лишние ре-рендеры

• Изменение state/props, новые ссылки в props каждый рендер, отсутствие мемоизации.

Как диагностировать

DevTools Performance

Запись выполнения → видно Layout (reflow), Paint, Composite, их длительность и триггеры.

DevTools Rendering

• Paint flashing — подсвечивает перерисовываемые области.
• Layout Shift Regions — сдвиги layout.

React DevTools Profiler

• Какие компоненты перерисовываются и почему (лишние ре-рендеры).
• «Highlight updates» — визуализация ре-рендеров.

Как уменьшить

• Анимировать transform/opacity (composite, без reflow/repaint).
• Группировать чтения/записи DOM (избегать layout thrashing).
• Мемоизация (React.memo, useMemo), стабильные ссылки.
• will-change точечно.

Коротко для собеседования

Причины перерисовки: reflow — изменение размеров/позиций, DOM, чтение геометрии (offsetHeight); repaint — изменение цвета/фона; в React — лишние ре-рендеры (новые ссылки, нет мемоизации). Диагностируют: DevTools Performance (Layout/Paint), Rendering (paint flashing), React Profiler. Уменьшают: transform/opacity, группировка DOM-операций, мемоизация.