როგორ შეინარჩუნოთ CSS რენდერინგის მუშაობა (reflow vs repaint)?

Question

Accepted Answer

ბრაუზერი CSS-ის ცვლილებებს პიქსელებში გარდაქმნის მილსადენის საშუალებით, და სხვადსხვა ცვლილებები ამოქმედებენ სხვადსხვა (უფრო ან ნაკლებად ძვირი) ეტაპებს:

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

- **Layout / reflow** — გეომეტრიის გადაანგარიშება (პოზიციები/ზომები). **ყველაზე ძვირი** — ერთი ელემენტის შეცვლა შეიძლება აიძულოს მრავალი სხვის გადაანგარიშება.
- **Paint / repaint** — პიქსელების შევსება (ფერი, ტექსტი, ჩრდილი). უფრო იაფი, ვიდრე 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-ს ყოველ კადრზე (jank); transform-ები GPU-ს მიერ კომპოზიციაა (გლუვი 60fps).

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

## მინიშნება ბრაუზერს 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-ია (იაფი), ხოლო `width`/`top`/`margin` რეflow-ს აიძულებს (ძვირი) — აგრეთვე layout thrashing-ის თავიდან აცილება და `contain`/`content-visibility`-ის გამოყენება — ესაა რაც ანიმაციებს 60fps-ზე აცქვებს და გვერდებს სწრაფი განიჭებს.