ब्राउज़र CSS परिवर्तनों को एक पाइपलाइन के माध्यम से पिक्सल में बदल देता है, और विभिन्न परिवर्तन विभिन्न (अधिक या कम महंगे) चरणों को ट्रिगर करते हैं:
Style → Layout (reflow) → Paint → Composite
ब्राउज़र CSS परिवर्तनों को एक पाइपलाइन के माध्यम से पिक्सल में बदल देता है, और विभिन्न परिवर्तन विभिन्न (अधिक या कम महंगे) चरणों को ट्रिगर करते हैं:
Style → Layout (reflow) → Paint → Composite
/* ❌ 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); transforms GPU द्वारा composite होते हैं (smooth 60fps)।
/* ❌ janky */ @keyframes a { to { left: 300px; width: 200px; } }
/* ✅ smooth */ @keyframes b { to { transform: translateX(300px) scaleX(2); } }
.animated { will-change: transform; } /* promotes to its own GPU layer ahead of time */
will-change का उपयोग केवल उन तत्वों पर करें जो एनिमेट होने वाले हैं — इसका अत्यधिक उपयोग बहुत सारी परतें बनाकर मेमोरी को बर्बाद कर देता है।
// ❌ 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");
- 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 को बाध्य करते हैं (महंगे) — साथ ही layout thrashing से बचना और contain/content-visibility का उपयोग करना — यही है जो एनिमेशन को 60fps पर रखता है और पेज तेज़ महसूस होते हैं।