कंपोज़िटिंग वह जगह है जहां स्क्रीन पर दिखाने के लिए पेज के पेंट किए गए हिस्सों को एक साथ रखा जाता है.
कंपोज़िटिंग वह है जहां पेज के पेंट किए गए हिस्सों को स्क्रीन पर दिखाने के लिए एक साथ रखा जाता है.
इस क्षेत्र में दो मुख्य बातें हैं जो पेज की परफ़ॉर्मेंस पर असर डालती हैं: मैनेज की जाने वाली कंपोज़िटर लेयर की संख्या और ऐनिमेशन के लिए इस्तेमाल की जाने वाली प्रॉपर्टी.
खास जानकारी
- अपने ऐनिमेशन के लिए पूरी तरह बदलने और अपारदर्शिता में बदलाव करने के लिए जारी रखें.
will-changeयाtranslateZकी मदद से, एलिमेंट को एक जगह से दूसरी जगह ले जाने का प्रमोशन करें.- प्रमोशन के नियमों का बहुत ज़्यादा इस्तेमाल करने से बचें. लेयर के लिए, मेमोरी और मैनेजमेंट की ज़रूरत होती है.
ऐनिमेशन के लिए, बदलाव और ओपैसिटी में बदलाव करने की सुविधा का इस्तेमाल करें
पिक्सल पाइपलाइन का सबसे अच्छा परफ़ॉर्म करने वाला वर्शन, लेआउट और पेंट, दोनों से बचाता है. साथ ही, इसके लिए सिर्फ़ कंपोज़िट बदलाव करने की ज़रूरत होती है:
ऐसा करने के लिए आपको उन प्रॉपर्टी में बदलाव करना होगा जिन्हें कंपोज़िटर ही मैनेज कर सकता है. आज ऐसी सिर्फ़ दो प्रॉपर्टी हैं जो सही हैं - transform और opacity:
transform और opacity के इस्तेमाल से जुड़ी चेतावनी यह है कि जिस एलिमेंट की मदद से इन प्रॉपर्टी में बदलाव किया जाता है वह उसकी कंपोज़िटर लेयर पर होना चाहिए. लेयर बनाने के लिए, आपको उस एलिमेंट को प्रमोट करना होगा जिसके बारे में हम आगे बात करेंगे.
उन एलिमेंट का प्रमोशन करें जिन्हें आपको ऐनिमेट करना है
जैसा कि हमने "पेंट की जटिलता को आसान बनाएं और पेंट एरिया को कम करें" सेक्शन में बताया है, आपको उन एलिमेंट को उनकी लेयर में प्रमोट करना चाहिए जिन्हें आपको ऐनिमेट करना है (इस वजह से, इसे ज़्यादा न करें!):
.moving-element {
will-change: transform;
}
या पुराने ब्राउज़र या जो ब्राउज़र पर काम नहीं करते उनमें बदलाव हो जाएगा:
.moving-element {
transform: translateZ(0);
}
लेयर मैनेज करें और लेयर में विस्फोट से बचें
यह जानना शायद मुश्किल है कि लेयर अक्सर परफ़ॉर्मेंस की मदद से, पेज पर मौजूद सभी एलिमेंट को प्रमोट करने में मददगार होती हैं. ये एलिमेंट कुछ इस तरह हैं:
* {
will-change: transform;
transform: translateZ(0);
}
जो यह बताने का एक गोल तरीका है कि आप पेज के हर एक एलिमेंट को प्रमोट करना चाहते हैं. समस्या यह है कि आपकी बनाई गई हर लेयर के लिए मेमोरी और मैनेजमेंट की ज़रूरत होती है और यह सुविधा मुफ़्त नहीं है. असल में, कम मेमोरी वाले डिवाइसों पर परफ़ॉर्मेंस पर असर, लेयर बनाने के किसी भी फ़ायदे से कहीं ज़्यादा हो सकता है. हर लेयर की टेक्सचर को जीपीयू पर अपलोड करना ज़रूरी होता है. इसलिए, सीपीयू और जीपीयू के बीच बैंडविथ और जीपीयू पर टेक्सचर के लिए मेमोरी उपलब्ध होने की वजह से कुछ अन्य पाबंदियां भी होती हैं.
अपने ऐप्लिकेशन की लेयर के बारे में जानकारी पाने के लिए, Chrome DevTools का इस्तेमाल करें
अपने ऐप्लिकेशन की लेयर के बारे में जानने और यह जानने के लिए कि किसी एलिमेंट में लेयर क्यों है, आपको Chrome DevTools की टाइमलाइन में पेंट प्रोफ़ाइलर को चालू करना होगा:
यह सुविधा चालू करने पर, आपको एक रिकॉर्डिंग करनी होगी. रिकॉर्डिंग पूरी हो जाने के बाद, अलग-अलग फ़्रेम पर क्लिक किया जा सकता है. यह फ़्रेम-प्रति-सेकंड बार और ब्यौरे के बीच में दिखता है:
इस पर क्लिक करने से आपको जानकारी में नया विकल्प दिखेगा: लेयर टैब.
इस विकल्प से एक नया व्यू सामने आ जाएगा, जिससे आप उस फ़्रेम के दौरान सभी लेयर पर पैन, स्कैन, और ज़ूम इन कर पाएंगे. साथ ही, हर लेयर के बनने की वजह भी पता चलेगी.
इस व्यू का इस्तेमाल करके, यह ट्रैक किया जा सकता है कि कितनी लेयर हैं. अगर स्क्रोल करने या ट्रांज़िशन (आपको करीब 4 से 5 मि॰से॰ की दूरी पर सेट करना चाहिए) जैसी कार्रवाइयों के दौरान कंपोज़िट करने में ज़्यादा समय लग रहा है, तो यहां दी गई जानकारी का इस्तेमाल करके यह देखा जा सकता है कि आपके पास कितनी लेयर हैं, उन्हें क्यों बनाया गया था, और फिर अपने ऐप्लिकेशन में लेयर की संख्या को मैनेज किया जा सकता है.