Bagaimanakah cara menjaga rendering CSS yang berprestasi tinggi (reflow vs repaint)?

Question

Accepted Answer

Penyemak imbas mengubah perubahan CSS menjadi piksel melalui saluran pipa, dan perubahan berbeda memicu peringkat berbeda (lebih atau kurang mahal):

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

- **Layout / reflow** — pengiraan semula geometri (kedudukan/saiz). **Paling mahal** — mengubah satu elemen boleh memaksa pengiraan semula banyak elemen lain.
- **Paint / repaint** — mengisi piksel (warna, teks, bayang). Lebih murah daripada layout.
- **Composite** — menggabungkan lapisan yang sudah dilukis (GPU). **Paling murah**.

## Hartanah mana 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 peraturan prestasi tunggal yang paling penting: **animasikan `transform` dan `opacity`, bukan `width`/`top`/`margin`.** Animasi hartanah layout menjalankan semula layout pada setiap bingkai (jank); transformasi disusun oleh GPU (lancar 60fps).

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

## Petunjuk penyemak imbas dengan will-change (secara hemat)

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

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

## Elakkan layout thrashing dalam 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");
```

## Keuntungan lain

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

Prestasi rendering pada dasarnya tentang *tidak memicu layout secara berulang*.

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