CSS வழங்கலை செயல்திறனுடன் எவ்வாறு வைத்திருப்பீர்கள் (reflow vs repaint)?

Question

Accepted Answer

உலாவி CSS மாற்றங்களை குழாய் மூலம் பிக்சல்களாக மாற்றுகிறது, மேலும் வெவ்வேறு மாற்றங்கள் வெவ்வேறு (அதிக அல்லது குறைந்த விலை) கட்டங்களைத் தூண்டுகின்றன:

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

- **தளவமைப்பு / reflow** — வடிவமைதி (நிலைகள்/அளவுகள்) மீண்டும் கணக்கிடுதல். **மிகவும் விலை** — ஒரு உறுப்பு மாற்ற பல மற்றவற்றின் மீண்டும் கணக்கீட்டை கட்டாயப்படுத்தலாம்.
- **வரவு / repaint** — பிக்சல்களை நிரப்புவது (வண்ணங்கள், உரை, நிழல்கள்). தளவமைப்பை விட மலிவு.
- **சம்பந்தம்** — ஏற்கனவே வரையப்பட்ட அடுக்குகளை இணைப்பது (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` அல்ல.** தளவமைப்பு பண்புகளை களிர்ப்பது ஒவ்வொரு சட்டத்திலும் தளவமைப்பை மீண்டும் இயக்குகிறது (jank); மாற்றங்கள் 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` ஐ களிர்க்க வேண்டிய உறுப்புகளில் மட்டுமே பயன்படுத்தவும் — அதை அதிகமாக பயன்படுத்துவது பல அடுக்குகளை உருவாக்கி நினைவகத்தை வீணாக்குகிறது.

## JS இல் தளவமைப்பு thrashing தவிர்க்கவும்

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

## இது ஏன் முக்கியம்

வழங்கல் செயல்திறன் பெரும்பாலும் *தளவமைப்புக்கு பல முறை தூண்ட தவிர்ப்பது பற்றியது*.

`transform`/`opacity` composite-only (மலிவு) ஆக இருக்கும் அதே நேரத்தில் `width`/`top`/`margin` reflow (விலை) கட்டாயப்படுத்துகின்றன என்பதை அறிதல் — தளவமைப்பு thrashing ஐ தவிர்ப்பது மற்றும் `contain`/`content-visibility` ஐ பயன்படுத்துவது — இது என்ன 60fps இல் களிர்ப்புகளை வைத்திருக்கிறது மற்றும் பக்கங்களை வேகமாக உணர்கிறது.