Si e mbajnë CSS rendering performant (reflow vs repaint)?

Question

Accepted Answer

Shfletuesi e kthen ndryshimet CSS në piksela përmes një pipeline-i, dhe ndryshime të ndryshme shkaktojnë faza të ndryshme (më shumë ose më pak të shtrenjta):

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

- **Layout / reflow** — rillogaritje e gjeometrisë (pozicione/madhësi). **Më e shtrenja** — ndryshimi i një elementi mund të detyroje rillogaritjen e shumë të tjerëve.
- **Paint / repaint** — plotësim i pikselëve (ngjyra, tekst, hije). Më e lirë se layout-i.
- **Composite** — kombinim i shtresave tashmë të pikturuara (GPU). **Më e lira**.

## Cilat veti shkaktojnë çfarë

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

Kjo është rregulla më e rëndësishme e performancës: **animoni `transform` dhe `opacity`, jo `width`/`top`/`margin`.** Animimi i vetive të layout-it ekzekuton përsëri layout-in në çdo frame (jank); transformimet janë të kombinuara nga GPU-ja (të qetë 60fps).

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

## Sugjeroni shfletuesit me will-change (rrallë)

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

Përdorni `will-change` vetëm në elemente rreth të animit — abuzimi me të shënoj kujtesën duke krijuar shumë shtresa.

## Shmangni layout thrashing-un në 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");
```

## Përfitime të tjera

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

## Pse është e rëndësishme

Performanca e renderimit është kryesisht për *mos shkaktimin e layout-it më shumë herë*.

Dija se `transform`/`opacity` janë vetëm composite (të lira) ndërsa `width`/`top`/`margin` detyrojnë reflow (të shtrenjta) — plus shmangja e layout thrashing-ut dhe përdorimi i `contain`/`content-visibility` — është ajo që e mbajnë animacionet në 60fps dhe faqet të ndjehen të shpejta.