Kif iżomm il-prestazzjoni tar-rendering tal-CSS (reflow vs repaint)?

Question

Accepted Answer

Il-browser jibdel il-bidliet CSS f'pixels permezz ta' pipeline, u bidliet differenti jużżu stadji differenti (aktar jew inqas għaljin):

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

- **Layout / reflow** — ricalkulazzjoni tal-ġeometrija (pożizzjonijiet/daqsijiet). **L-aktar għali** — il-bidla ta' element wieħed tista' timbid li jkun hemm ricalkulazzjoni ta' ħafna oħrajn.
- **Paint / repaint** — mili ta' pixels (alwann, test, ombri). Irħas mit-teqlim.
- **Composite** — tgħaqqid ta' saffi diġà ppintjati (GPU). **L-aktar irħas**.

## Liema proprjetajiet jużżu dak

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

Di hija r-regola ta' prestazzjoni waħda l-aktar importanti: **animate `transform` u `opacity`, mhux `width`/`top`/`margin`.** L-animazzjoni ta' proprjetajiet tal-layout ixegħel mill-ġdid layout fuq kull frame (jank); it-trasformazzjonijiet huma komposti mill-GPU (bla ħsara 60fps).

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

## Ħbieb il-browser b'will-change (bis-sewwa)

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

Uża `will-change` biss fuq elementi li ser jkunu animated — abuż tiegħu ibbaza l-memorja billi tinħoloq ħafna saffi.

## Evita layout thrashing f'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");
```

## Rebħa oħra

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

## Għaliex hu importanti

Il-prestazzjoni tar-rendering hija essenzjalment dwar *li ma jgħolluż il-layout mill-ġdid*.

Il-għarfien li `transform`/`opacity` huma composite-only (irħas) filwaqt li `width`/`top`/`margin` jimponu reflow (għali) — flimkien mal-evitament tal-layout thrashing u l-użu ta' `contain`/`content-visibility` — dan hu dak li żomm l-animazzjonijiet f'60fps u jagħmlu l-paġni jaħssu mħarrieġa.