• 👉 Why transform / opacity is fast
• 👉 Why GPU can save animation performance
• 👉 Why abusing will-change can lead to overturning

1. Understanding Composite Layer

• The browser splits the page into multiple layers, and each layer is drawn separately,
• Finally, it is handed over to the GPU to do only the "displacement/transparency/transformation" synthesis.

Core points:

• Stable layer content can reuse rasterized pixels.
• Eligible transform / opacity animations can primarily use Composite.
• Content, size or other paint-related changes can still trigger Layout / Paint.

2. Why is there a Composite Layer?

❌ Problems with traditional processes

JS → Layout → Paint → Composite

Each frame of the animation:

• Recalculate layout
• redraw pixels

👉CPU explodes, FPS drops to 20+

✅ The process after introducing the synthesis layer

首次：
Layout → Paint（生成位图）

动画中：
Composite（GPU 位移）

👉 Only do matrix operations on GPU

3. Browser internal perspective (very critical)

The essence of each Composite Layer is:

• A Bitmap (Rasterized Bitmap)

• Have your own:

  • displacement matrix
  • Transparency
  • Z order

The GPU only does:

matrix * bitmap → screen

⚡ Extremely fast

4. Under what circumstances will a Composite Layer be created?(must memorize)

🚀 Active creation (you have control)

transform: translateZ(0);
transform: translate3d(0,0,0);
opacity < 1;
will-change: transform;

🌈 Automatically created by the browser

• position: fixed
• video / canvas / iframe
• CSS 3D transform
• Animated transform / opacity
• overflow: scroll (some scenes)

❌ No composition layer will be created

left / top
width / height
margin / padding
background
color

These will return: 👉 Layout / Paint

5. DevTools practical verification

1️⃣ Open Layer Borders

DevTools → More Tools → Rendering
→ 勾选 Layer borders

• Green Border: Composition Layer

2️⃣ Demo comparison

transform animation (Composite only)

.box {
  transition: transform 0.5s;
}

👉 Only the border is moving 👉 No Paint flickering

left animation (whole process)

.box {
  transition: left 0.5s;
  position: relative;
}

👉 Per frame:

• Layout
• Paint
• Composite

3️⃣Performance panel confirmation

You will see:

• transform：🟦 Composite
• left：🟪 Layout + 🟩 Paint

6. Price of Composite Layer

⚠️ More is not always better

Each composition layer:

• Occupies GPU memory
• Increase synthesis cost

Consequences of abusing will-change:

• Video memory surges
• The page becomes slower instead
• More obvious on mobile

📌 Principle: Discard after use

.box {
  will-change: transform;
}
.box.done {
  will-change: auto;
}

7. Why can opacity / transform "skip Paint"?

Because:

• Does not change pixel content

• Just change:

  • displacement matrix
  • alpha value

👉 Bitmap reuse

8. The relationship between Composite Layer and Layout Thrashing

Problem	Solution
Frequent Layout	transform
Frequent Paint	Composition Layers
Animation stuttering	GPU compositing

📌 Composite is the ultimate performance escape hatch

9. Frame Perspective

Why do React/Vue love transform?

<div style={{ transform: `translateX(${x}px)` }} />

• Transforms usually preserve other nodes’ layout geometry.
• Avoiding paint depends on layers and content; verify it in Performance.
• JS-driven animation still runs main-thread work; frameworks do not make arbitrary callbacks interruptible.

Browser compositing and React scheduling are independent mechanisms.

The convergence of React Fiber and Composite

• Fiber organizes component work; some render work can yield.
• Composite combines reusable browser layers into the output frame.

They can reduce costs at different stages; a compositor layer is not a Fiber scheduling unit.

10. Summary

• Composite Layer is a layer mechanism introduced by browsers to improve rendering performance.
• The page will be split into multiple independent bitmap layers.
• If only transform or opacity is changed during animation,
• Browsers can skip Layout and Paint,
• Compositing directly from the GPU for higher frame rates.
• However, more compositing layers are not always better. Too many compositing layers will cause graphics memory and compositing overhead.