Promoted layers (transform, opacity, will-change, video, canvas) composite on GPU — too many layers waste memory.

Browser Performance

Browser compositing layers

<h2>Summary</h2>
<p><strong>Layout</strong> — geometry changed, reflow subtree. <strong>Paint</strong> — pixels drawn (color, text, shadows). <strong>Composite</strong> — layers combined by GPU. Changing <code>width</code> triggers layout; changing <code>color</code> often paint-only; <code>transform</code>/<code>opacity</code> often compositor-only. Use compositor-friendly animations; avoid animating layout properties at 60fps.</p>
<h2>Code example</h2>
<pre><code class="language-css">.box {
  /* layout + paint + composite */
  width: 200px;
  background: red;

  /* compositor-only — no layout */
  transform: translateX(100px);
  opacity: 0.9;
}
</code></pre>
<h2>Key points</h2>
<ul>
<li><strong>Layout</strong> — geometry changed, reflow subtree.</li>
<li><strong>Paint</strong> — pixels drawn (color, text, shadows).</li>
<li><strong>Composite</strong> — layers combined by GPU.</li>
<li>Changing <code>width</code> triggers layout; changing <code>color</code> often paint-only; <code>transform</code>/<code>opacity</code> often compositor-only.</li>
<li>Use compositor-friendly animations; avoid animating layout properties at 60fps.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://web.dev/articles/rendering-performance">Rendering performance</a></li>
<li><a href="https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count">CSS triggers</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-3-layout-thrashing">Layout thrashing</a></li>
<li><a href="/blogs/level-3-browser-compositing-layers">Browser compositing layers</a></li>
</ul>


**Layout** — geometry changed, reflow subtree.

Paint vs Layout vs Composite

Interleaving DOM reads (offsetWidth, getBoundingClientRect) with writes forces synchronous layout recalc — "layout thrashing." Batch reads then writes; use `requestAnimationFrame` for visual updates.