Что такое repaint и reflow в браузере?

Что проверяют

Понимаете ли вы разницу в стоимости и знаете ли про принудительный пересчёт.

Как отвечать

Пересчёт раскладки это вычисление размеров и положения элементов. Он затрагивает не только изменённый элемент, но и всё, что от него зависит, вплоть до целой ветки документа. Самая дорогая операция.

Перерисовка это заполнение пикселей: цвет, фон, тень, контур. Геометрия уже известна, поэтому дешевле.

Композиция это сборка готовых слоёв в изображение, часто силами видеокарты. Самая дешёвая стадия.

Порядок такой, что более ранняя стадия влечёт за собой все последующие: изменили геометрию, значит будет и перерисовка, и композиция.

Что к чему приводит:

• раскладка: изменение размеров, отступов, шрифта, содержимого, добавление и удаление элементов, а также изменение положения через смещение сверху и слева;
• перерисовка: цвет, фон, тень, видимость;
• только композиция: преобразование и прозрачность. Именно поэтому анимируют их, а не геометрию.

Отдельно стоит рассказать про принудительный синхронный пересчёт, потому что это самая частая реальная проблема. Браузер откладывает пересчёт, накапливая изменения. Но чтение свойства, зависящего от геометрии, заставляет его посчитать всё немедленно. Если чтение и запись чередуются в цикле, пересчёт происходит на каждой итерации:

for (const el of items) {
  el.style.height = el.offsetHeight + 10 + "px";   // чтение и запись вперемешку
}

Лечится разделением: сначала все чтения, потом все записи. Это правило стоит того, чтобы назвать его отдельно.

Что ещё помогает: изменять класс, а не свойства по одному; менять элементы вне документа и вставлять готовыми; анимировать преобразование; аккуратно использовать подсказку браузеру о предстоящем изменении, помня, что каждый лишний слой стоит памяти.

Где спотыкаются

Анимируют геометрию вместо преобразования.

Чередуют чтение и запись в цикле.

Считают перерисовку самой дорогой стадией.

Ставят подсказку о предстоящем изменении на всё подряд.