Reflow и repaint
Вопрос
Что такое reflow и repaint, как не тормозить страницу?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
reflow - пересчёт геометрии, repaint - перерисовка без пересчёта
reflow дороже и каскадный: задевает потомков и часто соседей
чтение offsetWidth или getBoundingClientRect после записи вызывает синхронный reflow
layout thrashing: чередование чтения и записи в цикле
лечение: сначала все чтения, потом все записи
transform и opacity анимируются на композиторе без reflow
Что могут спросить следом
- Какие свойства вызывают синхронный reflow при чтении
- Зачем нужен will-change и чем он опасен
- Как анимировать появление списка без дёрганья
Разбор
Reflow - пересчёт положения и размеров, repaint - перерисовка пикселей без пересчёта геометрии. Reflow дороже и каскадный.
Главный источник тормозов - layout thrashing: в цикле меняем стиль и тут же читаем
offsetHeight, заставляя браузер пересчитывать layout синхронно на каждой итерации.
Лечение - разделить: сначала все чтения, потом все записи.
Для анимации менять стоит только transform и opacity - они обрабатываются композитором,
без reflow и repaint. Анимация width, top или margin пересчитывает раскладку каждый
кадр и гарантированно даёт просадку.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.