19 — CSS Performance: Render Path, Containment & GPU Layers

<head>
  <style>
    /* Critical above-the-fold CSS inlined → removes a render-blocking round trip. */
    body { font-family: system-ui, sans-serif; }
    .hero { /* above-the-fold only */ }
  </style>
  <!-- Non-critical CSS: preload without blocking, swap to stylesheet on load. -->
  <link rel="preload" href="/assets/app.[hash].css" as="style" onload="this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/assets/app.[hash].css"></noscript>
</head>

/* The engine matches the RIGHTMOST selector (the "key") first, then walks UP the DOM.
   Deep descendant chains are O(depth) per key match. BEM's flat single-class is O(1). */
.nav a { }              /* find every <a>, check if ancestor is .nav */
.card:hover .title { } /* find every .title, check if ancestor is .card AND .card:hover */
/* Tips: avoid universal keys (*, [class]); prefer classes over tags; keep chains shallow. */
/* In practice, selector perf rarely matters on modern browsers — focus on layout/paint costs. */

// ❌ Alternating read (forces sync reflow) and write (schedules layout) in a loop → reflow EACH iteration.
items.forEach(item => {
  item.style.width = item.offsetWidth + 10 + 'px';  // read (reflow), write (schedule) — reflow per item
});

// ✓ Batch all reads first, then all writes → ONE reflow.
const widths = items.map(item => item.offsetWidth);  // all reads (one reflow)
items.forEach((item, i) => { item.style.width = widths[i] + 10 + 'px'; });  // all writes (one layout)

Change              Cost              Animate?
transform           Compositor (GPU)  ✅ 60fps
opacity             Compositor (GPU)  ✅ 60fps
filter              Compositor (mostly) ✅
color/bg-color      Paint             ⚠️ OK
box-shadow          Paint             ⚠️ (use pseudo-element opacity instead)
width/height        Layout            ❌ expensive (re-flows descendants)
top/left/margin     Layout            ❌ expensive
font-family/size    Layout            ❌ re-renders text
display/position    Layout            ❌ significant

/* ❌ width triggers layout every frame → janky, especially on mobile. */
.sidebar { width: 250px; transition: width 0.3s ease; }
.sidebar.collapsed { width: 0; }

/* ✓ transform (compositor-only, GPU, no layout). */
.sidebar { width: 250px; transition: transform 0.3s ease; transform: translateX(0); }
.sidebar.collapsed { transform: translateX(-100%); }

/* ✓ grid-template-columns: Xfr → Yfr (interpolable, resizes both sidebar and content smoothly). */
.layout { display: grid; grid-template-columns: 250px 1fr; transition: grid-template-columns 0.3s ease; }
.layout.collapsed { grid-template-columns: 0fr 1fr; }
.sidebar { overflow: hidden; }

/* Skips layout + paint for off-screen elements → massive win for long lists/feeds.
   contain-intrinsic-size gives a placeholder so the scrollbar is accurate (no jumps). */
.long-list-item {
  content-visibility: auto;
  contain-intrinsic-size: 0 50px;  /* (width height) placeholder estimate */
}
/* Support: Chrome 85+, Safari 18+, Firefox 125+. */

/* Tells the browser the element's internals don't affect the rest of the page → optimization. */
.card { contain: layout paint style; }  /* layout + paint + style isolation */
/* Values: layout, paint, style, size, strict (all), content (all except size).
   Use on isolated components (cards, widgets, third-party embeds). */

/* transform/opacity/filter/will-change promote to GPU layers. Good for animation, costs RAM. */
.modal { will-change: transform, opacity; }  /* hint: promote before animating */
.modal.closed { will-change: auto; }          /* remove after → frees GPU memory */
/* ❌ * { will-change: transform; } → every element gets a GPU layer → OOM on mobile.
   Add will-change just before the animation, remove after. Never leave it permanently. */

@font-face {
  font-family: "Inter";
  src: url("inter.woff2") format("woff2");  /* woff2 = best compression */
  font-display: swap;  /* show fallback immediately, swap when loaded → no FOIT */
  unicode-range: U+0000-00FF;  /* subset to Latin only → smaller download */
}

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

# Chrome DevTools → Performance: record → see layout/paint/composite times per frame.
# Rendering tab: Paint flashing (repaint regions), Layout Shift Regions (CLS), FPS meter.
# Coverage tab: % unused CSS per file → purge targets.
# Lighthouse: audits render-blocking CSS, unused CSS, FCP/LCP.

.sidebar { width: 250px; transition: width 0.3s ease; }
.sidebar.collapsed { width: 0; }