Bagaimana Anda menjaga performa rendering CSS (reflow vs repaint)?

Question

Accepted Answer

Browser mengubah perubahan CSS menjadi piksel melalui sebuah pipeline, dan perubahan yang berbeda memicu tahap yang berbeda (lebih atau kurang mahal):

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

- **Layout / reflow** — menghitung ulang geometri (posisi/ukuran). **Paling mahal** — mengubah satu elemen dapat memaksa menghitung ulang banyak elemen lainnya.
- **Paint / repaint** — mengisi piksel (warna, teks, bayangan). Lebih murah daripada layout.
- **Composite** — menggabungkan layer yang sudah dilukis (GPU). **Paling murah**.

## Properti mana yang memicu 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
```

Ini adalah aturan performa tunggal paling penting: **animasikan `transform` dan `opacity`, bukan `width`/`top`/`margin`.** Menganimasikan properti layout menjalankan ulang layout pada setiap frame (jank); transform dikomposit oleh GPU (smooth 60fps).

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

## Berikan hint ke browser dengan will-change (jarang-jarang)

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

Gunakan `will-change` hanya pada elemen yang akan dianimasikan — penggunaan berlebihan membuang memori dengan membuat terlalu banyak layer.

## Hindari layout thrashing di 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");
```

## Kemenangan lainnya

```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 ini penting

Performa rendering sebagian besar tentang *tidak memicu layout berulang kali*.

Mengetahui bahwa `transform`/`opacity` hanya composite (murah) sementara `width`/`top`/`margin` memaksa reflow (mahal) — plus menghindari layout thrashing dan menggunakan `contain`/`content-visibility` — itulah yang menjaga animasi pada 60fps dan halaman terasa cepat.