Koen njaga unjuk tindak rendering CSS (reflow vs repaint)?

Question

Accepted Answer

Browser ngowahi owah-owahan CSS dadi piksel liwat pipeline, lan owah-owahan beda-beda ngaaktifake tahap beda-beda (luwih akeh utawa kurang larang):

```text
Style → Layout (reflow) → Paint → Composite
```

- **Layout / reflow** — ngitung ulang geometry (posisi/ukuran). **Paling larang** — owah-owah siji elemen bisa maksa ngitung ulang akeh elemen liyane.
- **Paint / repaint** — mbubuhno piksele (warna, teks, bayangan). Luwih murah tinimbang layout.
- **Composite** — nggabung layer sing wis dilukis (GPU). **Paling murah**.

## Property apa sing ngaaktifake apa

```css
/* ❌ trigger LAYOUT (reflow) — costly, recalculates geometry every frame */
width, height, top, left, margin, padding, font-size

/* ⚠️ trigger PAINT — repaint pixels */
color, background, box-shadow, border-radius

/* ✅ trigger only COMPOSITE — GPU, no layout/paint */
transform, opacity
```

Iki aturan unjuk tindak sing paling penting: **animasi `transform` lan `opacity`, dudu `width`/`top`/`margin`.** Animasi property layout lan-lan ngowahi layout maneh (jank); transform dikomposis GPU (alus 60fps).

```css
/* ❌ janky */ @keyframes a { to { left: 300px; width: 200px; } }
/* ✅ smooth */ @keyframes b { to { transform: translateX(300px) scaleX(2); } }
```

## Awas browser karo will-change (karekso)

```css
.animated { will-change: transform; } /* promotes to its own GPU layer ahead of time */
```

Gunakno `will-change` mung ing elemen sing bakal dianimasi — nggunakno berlebihan gawe blas memory ngenei akeh lapis.

## Kuwati layout thrashing ing JS

```js
// ❌ read-write-read-write forces multiple synchronous reflows
for (const el of els) { el.style.width = el.offsetWidth + 10 + "px"; }
// ✅ batch reads, then writes
const widths = els.map(el => el.offsetWidth);
els.forEach((el, i) => el.style.width = widths[i] + 10 + "px");
```

## Mulane liya

```text
- contain: layout/paint — isolate a subtree so changes don't reflow the whole page
- content-visibility: auto — skip rendering offscreen content
- minimize deep selectors and huge unused stylesheets
```

## Mengapa iki penting

Unjuk tindak rendering utamane babagan *ora ngaaktifake layout nganti-nganti*.

Karepno yen `transform`/`opacity` dadi composite-only (murah) dene `width`/`top`/`margin` pakso reflow (larang) — luwih kuwati layout thrashing lan nggunakno `contain`/`content-visibility` — inggih iku sing njaga animasi 60fps lan katon cepet.