Conas a choinníonn tú an fhíorscéimh CSS feidhmíoch (reflow vs repaint)?

Question

Accepted Answer

Athraíonn an brabhsálaí athruithe CSS go picteilíní trí phíoplíne, agus spreagann athruithe éagsúla céimeanna difriúla (níos daoire nó níos saoire) :

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

- **Layout / reflow** — athríomh na céimeatrais (suíomhanna/méidir). **An rud is daoire** — is féidir athrú ar eilimint amháin a bhreiseáin go lán eile a athríomh.
- **Paint / repaint** — líonadh na bpicteilíní (dathanna, téacs, scáthanna). Níos saoire ná layout.
- **Composite** — a chur in iúl sraitheanna atá greanta cheana (GPU). **An rud is saoire**.

## Cén fhaisnéis a spreagann gach rud

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

Is í seo an riail feidhmíochta is tábhachtaí : **Gealadh `transform` agus `opacity`, ní `width`/`top`/`margin`.** Ag gealadh na n-airí leagan amach atrithé an leagan ar gach fráma (jank); is iad na transforms á chomhdhéanamh ag an GPU (réidh 60fps).

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

## Léiríonn an brabhsálaí le will-change (go cúramach)

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

Úsáid `will-change` ar eilimintí atá ar tí a bheith fhíorscéimhnithe amháin — is caillteanas ar an cuimhne atá ann má dhéantar róúsáid air trí iomarca sraitheanna a chruthú.

## Seachaint layout thrashing i 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");
```

## Bua eile

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

## Cén fáth a bhfuil sé tábhachtach

Tá feidhmíochta an fhíorscéimh den chuid is mó faoi *nach spreagtar an leagan arís agus arís eile*.

A fhios agat go bhfuil `transform`/`opacity` ina composite-only (saor) agus `width`/`top`/`margin` ag fhógairt reflow (daor) — agus faisnéis layout thrashing a chosc agus `contain`/`content-visibility` a úsáid — an rud atá sé a choinníonn an fhíorscéimh ag 60fps agus leathanaigh a bhraithnítear tapa.