Что такое reflow и repaint, какие изменения их вызывают и чего следует избегать?

В CSS изменения свойств могут вызвать либо Repaint (перерисовку), либо более затратный Reflow/Layout (пересчет расположения элементов).

• Repaint происходит, когда меняются визуальные свойства, не влияющие на геометрию элементов. Например:

  • color
  • background-color
  • visibility
  • box-shadow
  • outline

• Reflow/Layout вызывается при изменении свойств, влияющих на размеры, положение или структуру документа. Например:

  • width, height
  • margin, padding, border
  • top, left, right, bottom
  • font-size
  • display
  • position
  • float

Reflow — более дорогая операция, так как браузеру нужно пересчитать расположение элементов и потом выполнить перерисовку.

Поэтому для оптимизации производительности стоит минимизировать изменения свойств, вызывающих Reflow, особенно в анимациях и динамических изменениях DOM.