Compositing

🧠 TL;DR — Compositing stitches independently-painted layers back together on their own thread, which is why transform and opacity animations stay buttery smooth even when the main thread is busy.

Compositing is the final step of the rendering pipeline, where the browser takes all the separately painted pieces of the page and combines them into the single image you actually see on screen.

flowchart LR
    A[Parse HTML/CSS] --> B[Render Tree]
    B --> C[Layout]
    C --> D[Paint]
    D --> E[Composite]
    E --> F[Pixels on screen]

---

🧱 Why split the page into layers

Not every element gets painted directly into one big bitmap. The browser promotes certain elements onto their own layers — separate surfaces that can be moved, faded, or transformed independently.

Elements typically get their own layer when they have:

• a CSS transform

• an opacity animation

• will-change

• a <video> or <canvas>

Isolating them means the browser can update just that layer instead of repainting everything around it.

🧵 The compositor thread

Compositing usually runs on its own thread, separate from the main thread that handles JavaScript, styles, and layout. That's what lets a page keep scrolling or animating smoothly even while the main thread is busy.

⚡ Tip: This is exactly why transform and opacity are the go-to properties for smooth CSS animations — they can skip layout and paint entirely.

/* compositor-only animation — cheap and smooth */
.card {
  transition: transform 0.2s ease;
}
.card:hover {
  transform: scale(1.05);
}

🧩 Tiles and GPU rasterization

Large layers are often broken into smaller tiles, so the browser can prioritize rasterizing the ones closest to the viewport first. Rasterization for compositing is frequently handed off to the GPU, which is built to move and blend huge numbers of pixels in parallel.

✅ Key takeaways

• Paint decides what pixels look like; compositing decides how the pieces come together.

• Layers let the browser skip re-painting unaffected content.

• transform and opacity are compositor-only — the cheapest properties to animate.

That's the full trip from HTML and CSS to pixels on your screen: Parsing → Render Tree → Layout → Paint → Compositing.

#rendering-engine #browsers #css #performance