Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить repaint?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Repaint - це процес перемальовування елементів, коли змінюються візуальні властивості (наприклад,** `color`**,** `background`**,** `visibility`**), але їхні розміри і позиція лишаються незмінними.** **Ключове:** repaint дешевший, ніж reflow (layout), бо браузер не перераховує layout, а лише оновлює пікселі.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**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.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.