CSS Academy · पाठ

Performance: Transformable बनाम Repainting Props

जानिए कौन-सी property GPU-accelerated है और कौन-सी महँगे layout repaint को trigger करती है।

पाठ 4, कुल 4 में से13 चरण

Performance: Transformable बनाम Repainting Props, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

रेंडरिंग पाइपलाइन

ब्राउज़र तीन चरणों में रेंडर करते हैं: लेआउट (आकार + स्थिति) → पेंट (पिक्सेल) → कंपोज़िट (GPU परतों का विलय)। पहले चरणों को सक्रिय करने वाली प्रॉपर्टी को एनिमेट करना महँगा होता है।

लेआउट सक्रिय करने वाली प्रॉपर्टी

इन प्रॉपर्टी को बदलने पर ब्राउज़र को संभवतः पूरे पृष्ठ के लेआउट की फिर से गणना करनी पड़ती है। इन्हें एनिमेट करने से बचें:

width, height
margin, padding
top, left
font-size
display

पेंट सक्रिय करने वाली प्रॉपर्टी

ये लेआउट को छोड़कर पिक्सेल को फिर से पेंट करती हैं। इनकी लागत मध्यम होती है:

background-color
color
box-shadow
border

केवल कंपोज़िट चरण वाली प्रॉपर्टी

ये लेआउट और पेंट, दोनों को छोड़ देती हैं—ब्राउज़र को केवल पहले से रास्टराइज़ की गई परतों का कंपोज़िट करना पड़ता है। इनकी लागत बहुत कम होती है और ये GPU-त्वरित होती हैं:

transform
opacity

CSS एनिमेशन का स्वर्णिम नियम

सुचारु 60 फ्रेम/सेकंड वाले एनिमेशन के लिए केवल transform और opacity को एनिमेट करें। top/left के बजाय transform: translate() और display से फ़ेड करने के बजाय opacity का उपयोग करें।

  <div class="box demo-active">Box</div>

will-change प्रॉपर्टी

will-change ब्राउज़र को बताता है कि एनिमेशन शुरू होने से पहले किसी तत्व को अपनी GPU परत पर भेज दे, जिससे एनिमेशन के बीच में होने वाली “प्रमोशन फ्लैश” रुक जाती है।

  <div class="animated">Animated</div>

will-change: auto

एनिमेशन पूरा होने के बाद will-change: auto सेट करें या इस प्रॉपर्टी को पूरी तरह हटा दें। बहुत अधिक तत्वों को GPU परत पर बनाए रखने से GPU मेमोरी व्यर्थ होती है।

DevTools से मापना

फ़्रेम के समय का रिकॉर्ड और निरीक्षण करने के लिए Chrome DevTools के Performance टैब का उपयोग करें। Rendering टैब पेंट-फ्लैशिंग सक्षम कर सकता है—हरा ओवरले दिखाता है कि हर फ़्रेम में कौन-से तत्व फिर से पेंट हो रहे हैं।

टॉप/लेफ़्ट के बजाय ट्रांसफ़ॉर्म

सबसे प्रभावी अनुकूलन है: स्थिति-आधारित एनिमेशन को ट्रांसफ़ॉर्म से बदलें:

  <div class="fly demo-active">Fly</div>

रंग ट्रांज़िशन की लागत

पृष्ठभूमि के रंग का ट्रांज़िशन फिर से पेंट कराता है, लेकिन लेआउट को नहीं बदलता। छोटे तत्वों के लिए यह स्वीकार्य है। बड़ी पृष्ठभूमि के लिए इसके बजाय अपारदर्शिता ट्रांज़िशन वाले छद्म-तत्व का उपयोग करने पर विचार करें:

  <button class="btn demo-active">Hover me</button>

contain प्रॉपर्टी

contain प्रॉपर्टी ब्राउज़र को संकेत देती है कि कोई तत्व और उसकी उपशाखा स्वतंत्र हैं। इससे लेआउट अमान्य होने का दायरा सीमित होता है और फिर से पेंट करने का प्रदर्शन बेहतर होता है।

  <div class="widget">Widget</div>

त्वरित जाँच

कौन-सी दो CSS प्रॉपर्टी कंपोज़िट चरण में लेआउट या पेंट सक्रिय किए बिना एनिमेट की जा सकती हैं?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति

लेआउट प्रॉपर्टी (width, top, margin) को एनिमेट करने से महँगी पुनर्गणनाएँ होती हैं। पेंट प्रॉपर्टी (color, background) की लागत कम होती है। केवल transform और opacity ही लेआउट या पेंट सक्रिय किए बिना GPU कंपोज़िट चरण में एनिमेट होती हैं। सुचारु और बेहतर प्रदर्शन वाले एनिमेशन के लिए हमेशा इन्हें प्राथमिकता दें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Performance: Transformable बनाम Repainting Props” पाठ निःशुल्क है?

हाँ—“Performance: Transformable बनाम Repainting Props” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Performance: Transformable बनाम Repainting Props” में मैं क्या सीखूँगा?

जानिए कौन-सी property GPU-accelerated है और कौन-सी महँगे layout repaint को trigger करती है। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Performance: Transformable बनाम Repainting Props” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Transition Property की अवधि और Timing
Easing Functions: ease linear cubic-bezier
कई Properties में Transition
Performance: Transformable बनाम Repainting Props

← CSS Academy पर वापस जाएँ