Расскажи, что такое Reflow и Repaint?

Вопрос на собеседовании довольно частый. И обычно на него хотят услышать краткий ответ. Давайте отвечать!

Repaint (перерисовка). Происходит при изменении стилей, которые никак не влияют на положение элемента на странице и его размеры. Допустим, мы поменяли цвет какого-нибудь блока. Перерисовка произойдет при обновлении значений у свойств background-color, border-color, visibility и других.

Reflow (перекомпоновка). Происходит при изменении положения элемента на странице и (или) изменении его размеров. Например, размеры элемента мы можем поменять через width, height, padding, border и др. Позицию элемента на странице изменяют свойства left, right, top, bottom, margin, display и тд.

Кроме этого, Reflow могут вызывать и манипуляции с DOM (добавление, удаление, изменение узлов), и ресайз окна браузера, и получение позиции скрола, и изменение содержимого HTML-элемента (например, добавить больше текста в div).

И еще один важный момент: обычно после каждого Reflow происходит Repaint, так как браузеру необходимо снова перерисовать измененный контент.

Как избежать лишних Reflow и Repaint?

Один из способов - использовать для анимаций CSS-свойства transform и opacity, чтобы делегировать обработку стилей на GPU (графический процессор) и вынести анимацию на отдельный слой.

Подробнее про это читайте в моей статье "Как работают браузеры?"