Ответ
Reflow (или Layout) тяжелее, чем Repaint, потому что включает в себя пересчет геометрии элементов (размеры, позиции), что вызывает каскадные изменения в DOM. Repaint же только перерисовывает пиксели без изменения структуры.
Пример:
// Вызовет reflow (изменение ширины) + repaint
element.style.width = '100px';
// Вызовет только repaint (изменение цвета)
element.style.color = 'red';Оптимизация: минимизируйте reflow, группируя изменения DOM или используя requestAnimationFrame.
Ответ 18+ 🔞
А, ну вот, опять про эту мать их... про reflow и repaint. Слушай, давай я тебе на пальцах, а то ты, как обычно, вникаешь хуёво.
Представь себе, блядь, твою квартиру. Reflow — это когда ты, сука, решил диван нахуй передвинуть. И не просто передвинуть, а ещё и стену снести, чтобы он влез. Всё пиздец как пересчитывать надо: где теперь стол поставить, куда телевизор, а этот ебучий ковёр уже не подходит по размеру. Каскад, блядь, полный! Все соседи снизу уже стучат, потому что ты у них потолок обои хуяришь.
А Repaint — это когда ты просто, понимаешь, переклеил обои на той же стене. Диван на месте, стена на месте, всё на месте. Просто цвет сменил. Ну перерисовал пиксели и всё, ебать. Никакой геометрии, никакого пиздеца.
Вот и в коде так же, ёпта:
// Это как диван передвинуть. Всё, пиздец, reflow + repaint.
// Браузер: "Ну бля, опять считать, сука..."
element.style.width = '100px';
// А это просто обои переклеить. Только repaint.
// Браузер: "О, окей, просто красненьким залью, и похуй."
element.style.color = 'red';А теперь главная мысль, в рот меня чих-пых: Reflow всегда тяжелее, потому что это пиздец и разруха, а Repaint — это так, косметика.
И вот ты, такой умный, начинаешь в цикле десять раз диван туда-сюда двигать. Браузер просто охуевает, у него волосы дыбом встают, и он тебе страницу рвёт в клочья.
Как не быть мудаком? Оптимизируй, блядь!
Не дёргай DOM как сумасшедший. Сгруппируй изменения, сделай всё за один заход, либо используй requestAnimationFrame, чтобы браузер сам решил, когда ему это удобнее всего сделать — в момент следующего отрисовывания кадра. Не мешай ему работать, пидарас шерстяной!
Короче, суть: меньше двигай мебель (reflow), чаще просто крась стены (repaint). И всем будет хорошо. Всё, вопрос закрыт, хули.