Why Browser Repaints Slow Your Site and How to Optimize Them
This article explains what browser repaint (reflow) is, how screen refresh rates and the pixel pipeline work, the performance impact of excessive repaints—including CPU load and CLS—and provides practical strategies to minimize reflows for smoother web experiences.
What Is Repaint (Reflow)
Repaint, also called reflow, is the process of recalculating layout when layout‑related properties such as width, height, or margin change, triggering the browser to redraw the page. It can happen intentionally or unexpectedly, for example when switching from a list view to a table view or from simplified to traditional Chinese characters.
Refresh Rate and Pixel Pipeline
Refresh Rate
Most devices refresh their screens 60 times per second, producing a visual output called a frame. Browsers have limited time (about 10 ms) to generate each frame, so unnecessary work like extra repaints can cause noticeable stutter.
Pixel Pipeline
The pixel pipeline converts HTML, CSS, and JavaScript into visible pixels on the screen. It includes parsing, style calculation, layout, painting, and compositing.
JavaScript : Handles tasks that cause visual changes.
Style Calculation : Determines which CSS rules apply to each element.
Layout : Computes the geometry of elements; for example, the width of <body> influences the size of its descendants.
Painting : Fills pixels with text, colors, images, borders, shadows, etc., often across multiple layers.
Compositing : Merges layers in the correct order so overlapping elements render properly.
Painting is split into two tasks: creating a list of paint calls and filling pixels (rasterization). Developers cannot control rasterization directly.
How Repaint Affects Performance
Repaints consume significant CPU resources to update the render tree, reducing the CPU’s ability to handle user interactions and script execution, which leads to slower rendering and poorer responsiveness. Google measures this impact with the Cumulative Layout Shift (CLS) metric; a good CLS score should be 0.1 or lower.
Summary
Operations That Trigger Reflow
Adding, removing, or modifying DOM nodes
Changing element dimensions (width, height)
Altering margins or padding
Changing font size
Showing or hiding elements
Optimization Strategies
Batch DOM changes to reduce the number of reflows.
Update styles via CSS classes instead of individual property changes.
Minimize layout recalculations by limiting reads/writes of layout‑related properties in JavaScript.
Use DocumentFragment to insert many nodes at once.
Leverage CSS hardware‑accelerated properties such as transform and opacity to avoid heavy CPU work.
Code Mala Tang
Read source code together, write articles together, and enjoy spicy hot pot together.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.