Skip to main content

Що робить repaint?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

Repaint (перемальовування) - це етап роботи браузерного рендерингу, під час якого перемальовується зовнішній вигляд елементів без зміни їхньої геометрії і розташування в документі.

Тобто браузер не перераховує layout, а лише оновлює пікселі.

Коротка відповідь для співбесіди

Repaint - це процес перемальовування елементів, коли змінюються візуальні властивості (наприклад, color, background, visibility), але їхні розміри і позиція лишаються незмінними.

Трохи детальніше

Браузер зазвичай проходить такі етапи рендерингу:

DOM → CSSOM → Render Tree → Layout → Paint → Composite

Repaint відбувається на етапі Paint.

Наприклад, repaint викликають зміни:

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

Приклад:

js
element.style.backgroundColor = "red";

Layout не потрібен, лише repaint.

Важливо для продуктивності

Repaint дешевший, ніж reflow (layout), але все одно може бути дорогим при:

  • великій кількості елементів
  • частих змінах
  • анімаціях через JS

Тому для анімацій часто використовують:

  • transform
  • opacity

Тому що вони можуть оброблятися на compositor layer, оминаючи repaint.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку