Some CSS updates make the browser recalculate element geometry; others only change how existing geometry is drawn. Geometry changes commonly require layout (often called reflow) and repaint, while a color change usually needs a repaint but not layout. The distinction explains why changing width or animating left can cost more than changing color—and why transform and opacity can be useful animation choices when the browser can handle them during composition.
What happens when the browser updates a page?
A useful rendering model has four stages: style recalculation, layout, paint, and composition. They describe different kinds of work, though browsers can optimize or combine work differently depending on the page and device.
As an Amazon Associate I earn from qualifying purchases.
- Style recalculation: The browser determines the computed styles that apply to elements after CSS, classes, or other state changes.
- Layout: It calculates the size and position of rendered boxes. A change that affects geometry can require layout again; this recalculation is commonly called reflow.
- Paint: The browser draws visual details—such as text, colors, borders, shadows, and images—into pixels.
- Composition: The browser combines layers into the final image displayed on screen. Some updates on suitable independent layers can be handled here without repainting that layer.
These stages can cascade: a change that requires layout can also require paint, and the updated result must be composed. Layering can limit how much must be repainted, but it is not free: layers consume memory. MDN’s rendering guidance describes the stages and their typical costs.
What is the difference between reflow and repaint?
Reflow (layout) is about geometry: the browser recalculates boxes, sizes, or positions. Repaint is about appearance: the browser redraws pixels for visual details. A repaint does not necessarily require layout, but a layout change commonly leads to repainting affected content.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
For example, changing an element’s width generally affects geometry, so the browser may need to recalculate layout and repaint. Changing its color generally changes appearance without changing geometry, so it usually requires style recalculation and paint but not layout. These are typical paths, not guarantees for every browser, property, or page structure. MDN’s explanation of how browsers work covers style, layout, and rendering.
Why can a geometry change be expensive?
Geometry is connected: changing one element’s size or position can affect where other content fits. The browser may have to recalculate layout beyond the element itself, then repaint the affected areas. The actual work depends on the page’s structure and the extent of the change; there is no universal property ranking that predicts performance for every implementation.
At 60 frames per second, each frame takes about 16.7 milliseconds. MDN presents this as time for scripts, style recalculation, layout when needed, and repaint—not as a guaranteed budget for every display or device. A commonly accepted smooth-animation rate is 60 fps, but it is not a requirement or guarantee for all hardware. MDN’s animation performance guidance explains the timing context.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Why use transform instead of left for animation?
Animating left typically changes an element’s position in layout, which can trigger layout work and repaint. Animating transform, such as with translate(), changes how the element is visually transformed without changing its layout position. When the browser can handle that update in composition on a suitable independent layer, it may avoid layout and repaint for the animation.
That is an opportunity, not a promise: a transform is not automatically GPU-accelerated or free, and actual behavior depends on browser decisions, page complexity, and hardware. opacity can likewise be handled in composition on a suitable layer. For either property, profile the actual page rather than assuming the fastest path. MDN’s CSS and JavaScript animation guidance discusses these trade-offs.
How can you reduce unnecessary rendering work?
- Profile the page: Use browser performance tools to identify whether a specific interaction is spending time in scripting, style recalculation, layout, paint, or other work. Test on the target page and device; documentation describes typical behavior, not a cross-browser benchmark.
- Batch changes: Group DOM and style updates where possible instead of repeatedly interleaving writes with measurements that may force layout. MDN’s critical rendering path guidance recommends batching updates and avoiding animation of box-model properties.
- Limit geometry changes: Avoid repeatedly changing dimensions or positions when a visual transform can achieve the intended effect without changing layout.
- Use containment selectively: CSS containment can limit the effect of work to a portion of the page;
content-visibilitycan help avoid rendering work for content that is not currently needed. The right choice depends on the content and interaction. See MDN’s CSS containment guide. - Reserve space for delayed content: If an image or other asset has known dimensions, reserve its space so it is less likely to push surrounding content when it loads. This can reduce unexpected layout shifts, though it cannot prevent every cause of movement. See MDN’s cumulative layout shift guidance.
- Use
will-changesparingly: It can signal an anticipated change, but indiscriminate use may create unnecessary layers and memory costs. Apply it only when profiling indicates a need and remove it when the change is no longer imminent. MDN’swill-changereference explains the caution.
How should you choose an update approach?
Start with the visual result you need, then check what the browser actually does. A color transition is usually a paint-only change; changing width or layout position commonly involves layout and paint; transform and opacity may be handled in composition when the browser uses a suitable layer. Compare the affected area, whether layout or repaint occurs, any layer-memory cost, and measured frame performance on the target page and device. No single CSS property is universally fastest in every context.
Quick Recap
Best Value
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Free tools Windows power users keep installed
One-click scans. No signup required.
