Unawezaje kubaki CSS rendering kuwa na utendaji mzuri (reflow vs repaint)?

Question

Accepted Answer

Kivinjari kinabadilisha mabadiliko ya CSS kuwa pixels kupitia pipeline, na mabadiliko tofauti yanaanzisha hatua tofauti (ghali zaidi au ndogo):

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

- **Layout / reflow** — hesabu upya ya jiometri (nafasi/ukubwa). **Ghali zaidi** — kubadilisha kipengele kimoja kunaweza kulazimisha hesabu upya ya nyingine nyingi.
- **Paint / repaint** — kujaza pixels (rangi, maandishi, vivuli). Rahisi kuliko layout.
- **Composite** — kuchanganya tabaka lililotengenezwa tayari (GPU). **Rahisi zaidi**.

## Sifa gani zinasababisha nini

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

Hii ni kanuni moja muhimu zaidi ya utendaji: **animeisha `transform` na `opacity`, si `width`/`top`/`margin`.** Kuanimeisha sifa za layout kueneza layout tena kila frame (jank); transforms zinakutengenezwa na GPU (laini 60fps).

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

## Kumbuka kivinjari na will-change (kwa karibu)

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

Tumia `will-change` tu kwenye vipengele vinavyokuja kuanimeishwa — kutotumia mbalimbali husambaza kumbukumbu kwa kuunda tabaka nyingi.

## Kamatia layout thrashing katika 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");
```

## Faida nyingine

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

## Kwa nini inafanya jambo

Utendaji wa rendering ni zaidi kuhusu *kutouliza layout mara nyingi*.

Kujua kwamba `transform`/`opacity` ni composite-only (rahisi) habari `width`/`top`/`margin` lazimisha reflow (ghali) — pamoja na kuepuka layout thrashing na kutumia `contain`/`content-visibility` — ndiyo kile kinachobaki animesheni kwa 60fps na kurasa kuwa haraka.