Back to course

Lesson 98: CSS Performance: Reflow, Repaint, and Compositing

CSS Mastery: From Zero to Hero in 100 Lessons

98. CSS Performance: Reflow, Repaint, and Compositing

Understanding how the browser processes CSS is key to writing high-performance, smooth code, especially for animations.

1. Reflow (Layout)

Reflow is the browser process of calculating the size and position of elements on the page. This is the most expensive operation.

  • Triggered by: Changes to Box Model properties (width, height, margin, padding), changing the display property, or modifying font sizes.
  • Impact: A change to one element (e.g., resizing the body width) often forces a reflow of every subsequent element, slowing down the page.

2. Repaint (Paint)

Repaint is the process of filling the pixels with colors, borders, and shadows.

  • Triggered by: Changes to visual styles that don't affect layout (color, background-color, visibility).
  • Impact: Cheaper than reflow, but still expensive for complex elements.

3. Compositing (Optimal)

Compositing is the cheapest process. It only changes the position of elements that have been moved onto their own layer in the GPU, avoiding the CPU calculation of reflow and repaint.

  • Triggered by: Changes to opacity and transform.

Best Practice: Always prefer animating properties like transform: translate() and opacity over animating top/left/margin to ensure your animations remain smooth (60 frames per second).