Suggest an editImprove this articleRefine the answer for “What does repaint do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Repaint is the process of repainting elements when visual properties change (for example,** `color`**,** `background`**,** `visibility`**), while their size and position stay the same.** **Key point:** repaint is cheaper than reflow (layout), because the browser does not recalculate layout, it only updates pixels.Shown above the full answer for quick recall.Answer (EN)Image**Repaint** is a stage of the browser's rendering process where the visual appearance of elements is redrawn without changing their geometry or position in the document. In other words, the browser does not recalculate layout, it only updates pixels. --- ### Short answer for an interview **Repaint is the process of repainting elements when visual properties change (for example,** `color`**,** `background`**,** `visibility`**), while their size and position stay the same.** --- ### A bit more detail The browser typically goes through these rendering stages: ``` DOM → CSSOM → Render Tree → Layout → Paint → Composite ``` **Repaint happens at the Paint stage.** For example, repaint is triggered by changes to: - `color` - `background` - `border-color` - `visibility` - `box-shadow` - `outline` Example: ```js element.style.backgroundColor = "red"; ``` No layout is needed, only repaint. --- ### Important for performance Repaint is cheaper than reflow (layout), but it can still be expensive with: - a large number of elements - frequent changes - animations driven by JS That's why animations often use: - `transform` - `opacity` Because they can be handled on the compositor layer, bypassing repaint.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.