Πώς διατηρείτε την απόδοση της CSS απόδοσης (reflow vs repaint);

Question

Accepted Answer

Ο browser μετατρέπει τις αλλαγές CSS σε pixels μέσω ενός pipeline και διαφορετικές αλλαγές ενεργοποιούν διαφορετικά (περισσότερο ή λιγότερο δαπανηρά) στάδια:

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

- **Layout / reflow** — υπολογισμός γεωμετρίας (θέσεις/μεγέθη). **Πιο δαπανηρό** — η αλλαγή ενός στοιχείου μπορεί να αναγκάσει τον υπολογισμό πολλών άλλων.
- **Paint / repaint** — συμπλήρωση pixel (χρώματα, κείμενο, σκιές). Φθηνότερη από layout.
- **Composite** — συνδυασμός ήδη ζωγραφισμένων στρώσεων (GPU). **Φθηνότερη**.

## Ποιες ιδιότητες ενεργοποιούν τι

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

Αυτός είναι ο ένας και μόνος σημαντικότερος κανόνας απόδοσης: **κινήστε `transform` και `opacity`, όχι `width`/`top`/`margin`.** Η κίνηση ιδιοτήτων layout εκτελεί ξανά layout σε κάθε frame (jank); τα transforms συντίθεται από GPU (ομαλή 60fps).

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

## Υπόδειξη του browser με will-change (σπάνια)

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

Χρησιμοποιήστε `will-change` μόνο σε στοιχεία που πρόκειται να κινηθούν — η υπερ-χρήση σπαταλά μνήμη δημιουργώντας πάρα πολλές στρώσεις.

## Αποφύγετε layout thrashing στο 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");
```

## Άλλες νίκες

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

## Γιατί το καταλαβαίνει

Η απόδοση απόδοσης σχετίζεται κυρίως με το *να μην ενεργοποιείτε layout επανειλημμένως*.

Το γνώρισμα ότι `transform`/`opacity` είναι composite-only (φθηνό) ενώ `width`/`top`/`margin` αναγκάζουν reflow (δαπανηρό) — συν την αποφυγή layout thrashing και τη χρήση `contain`/`content-visibility` — είναι αυτό που διατηρεί τις κινήσεις σε 60fps και κάνει τις σελίδες να αισθάνονται γρήγορες.