Оффлайн
- Регистрация
- 9 Май 2015
- Сообщения
- 1,483
- Баллы
- 155
What are Layout, Paint, and Composite?
Layout, Paint, and Composite are crucial steps in the browser's Rendering Pipeline.
When a browser renders a webpage, it starts by processing the HTML and CSS. Then it figures out which CSS styles apply to each HTML element (this builds the Render Tree). After that, the browser performs the following steps in order: Layout > Paint > Composite
Layout
Calculates where each element should appear on the page and how big it should be. Involves CSS like margin, top/right/bottom/left, width. If any of these properties change, the browser must recalculate everything, a process called Reflow.
Paint
Fills in the pixels e.g. border, background-color, visibility. If this step runs again, it's called a Repaint.
Composite
For certain CSS properties like transform and opacity, the browser promotes the element to its own layer and uses the GPU to process it. This is faster than relying solely on the CPU. Finally, all the layers are composited (combined) to produce the final result on screen.
How Do They Affect Performance?
CSS can change dynamically through interactions like :hover, :active, or via CSS animations and transitions. Each of these can trigger different parts of the rendering pipeline.
These steps are sequential:
Triggering Reflow or Repaint is more expensive than triggering Composite-only operations, which are GPU-accelerated and lightweight.
Demo: CSS Reflow vs Composite Performance
Check out the I created to see this in action.
It includes:
How do they differ?
Group A uses left (triggers Layout > Paint > Composite)
Group B uses transform: translateX() (triggers only Composite)
Paint Flashing
Enable Paint Flashing in Chrome DevTools:
You'll see Group A constantly repainting due to left triggering reflow/repaint.
Group B, using transform, won't flash — because it bypasses reflow/paint entirely.
Performance Monitor
Set the ball count to 1,000 and toggle to show only Group A, then open Performance Monitor:
Group A shows high CPU usage and spikes in Layouts and Style Recalcs.
Switch to Group B and you'll see:
Summary
Layout, Paint, and Composite are essential to rendering a web page.
Different CSS properties trigger different steps.
Understanding these can give you powerful tools to diagnose and improve performance.
Resources
Layout, Paint, and Composite are crucial steps in the browser's Rendering Pipeline.
When a browser renders a webpage, it starts by processing the HTML and CSS. Then it figures out which CSS styles apply to each HTML element (this builds the Render Tree). After that, the browser performs the following steps in order: Layout > Paint > Composite
Layout
Calculates where each element should appear on the page and how big it should be. Involves CSS like margin, top/right/bottom/left, width. If any of these properties change, the browser must recalculate everything, a process called Reflow.
Paint
Fills in the pixels e.g. border, background-color, visibility. If this step runs again, it's called a Repaint.
Composite
For certain CSS properties like transform and opacity, the browser promotes the element to its own layer and uses the GPU to process it. This is faster than relying solely on the CPU. Finally, all the layers are composited (combined) to produce the final result on screen.
How Do They Affect Performance?
CSS can change dynamically through interactions like :hover, :active, or via CSS animations and transitions. Each of these can trigger different parts of the rendering pipeline.
These steps are sequential:
If Layout (Reflow) is triggered: the browser must perform Layout > Paint > Composite
If Paint (Repaint) is triggered: the browser must perform Paint > Composite
If only Composite is triggered: only Composite step is run (most efficient)
Triggering Reflow or Repaint is more expensive than triggering Composite-only operations, which are GPU-accelerated and lightweight.
Demo: CSS Reflow vs Composite Performance
Check out the I created to see this in action.
It includes:
- A selector to control how many balls are animated
- Toggles to enable/disable each animation group
- Two groups of balls (A & B) moving left and right
How do they differ?
Group A uses left (triggers Layout > Paint > Composite)
Group B uses transform: translateX() (triggers only Composite)
Paint Flashing
Enable Paint Flashing in Chrome DevTools:
You'll see Group A constantly repainting due to left triggering reflow/repaint.
Group B, using transform, won't flash — because it bypasses reflow/paint entirely.
Performance Monitor
Set the ball count to 1,000 and toggle to show only Group A, then open Performance Monitor:
Group A shows high CPU usage and spikes in Layouts and Style Recalcs.
Switch to Group B and you'll see:
- Lower CPU
- Fewer style recalcs / sec
- Layout/sec drops to zero
Summary
Layout, Paint, and Composite are essential to rendering a web page.
Different CSS properties trigger different steps.
Understanding these can give you powerful tools to diagnose and improve performance.
Resources