CSS işlemesini nasıl performanslı tutarsınız (reflow vs repaint)?

Question

Accepted Answer

Tarayıcı CSS değişikliklerini bir boru hattı aracılığıyla piksellere dönüştürür ve farklı değişiklikler farklı (daha az veya daha maliyetli) aşamaları tetikler:

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

- **Layout / reflow** — geometri (konumlar/boyutlar) yeniden hesaplanması. **En pahalı** — bir öğenin değiştirilmesi birçok başkasının yeniden hesaplanmasını zorlayabilir.
- **Paint / repaint** — pikselleri doldurma (renkler, metin, gölgeler). Layout'tan daha ucuz.
- **Composite** — zaten boyanan katmanları (GPU) birleştirme. **En ucuz**.

## Hangi özellikler neyi tetikler

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

Bu, tek en önemli performans kuralıdır: **`transform` ve `opacity` animasyonunu yapın, `width`/`top`/`margin` değil.** Layout özelliklerini animasyonlu hale getirmek her frame'de layout'u yeniden çalıştırır (jank); dönüşümler GPU tarafından birleştirilir (düzgün 60fps).

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

## will-change ile tarayıcıya ipucu verin (nadiren)

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

`will-change` öğesini yalnızca animasyonları yapacak öğelerde kullanın — aşırı kullanımı birçok katman oluşturarak belleği boşa harcar.

## JS'de layout thrashing'i önleyin

```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");
```

## Diğer kazanımlar

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

## Neden önemli

İşleme performansı, çoğunlukla *layout'u tekrar tekrar tetiklememek* hakkındadır.

`transform`/`opacity`'nin composite-only (ucuz) olduğunu, `width`/`top`/`margin`'in reflow (pahalı) zorladığını bilmek — artı layout thrashing'i önlemek ve `contain`/`content-visibility` kullanmak — animasyonları 60fps'de tutan ve sayfaları hızlı hissetiren şeydir.