सिर्फ़ कंपोज़िटर वाली प्रॉपर्टी पर ही रहें और लेयर की संख्या मैनेज करें

कंपोज़िटिंग वह जगह है जहां पेज के पेंट किए गए हिस्सों को स्क्रीन पर दिखाने के लिए एक साथ रखा जाता है.

कंपोज़िटिंग वह जगह है जहां पेज के पेंट किए गए हिस्से एक साथ रखे जाते हैं स्क्रीन पर दिखाई दे रहा है.

इस क्षेत्र में दो मुख्य कारक पेज प्रदर्शन को प्रभावित करते हैं: प्रबंधित किए जाने वाले कंपोज़िटर लेयर की संख्या और वे प्रॉपर्टी जिनका इस्तेमाल आप एनिमेशन के लिए करते हैं.

खास जानकारी

• अपने ऐनिमेशन को बदलने और अपारदर्शिता (ओपैसिटी) में होने वाले बदलावों के लिए बने रहें.
• 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 में Paint प्रोफ़ाइलर को चालू करना होगा' टाइमलाइन:

इस सुविधा के चालू होने पर, आपको वीडियो रिकॉर्ड करना चाहिए. रिकॉर्डिंग पूरी होने पर, अलग-अलग फ़्रेम पर क्लिक किया जा सकता है. यह फ़्रेम-प्रति-सेकंड बार और उनकी जानकारी के बीच होता है:

इस पर क्लिक करने से आपको जानकारी में एक नया विकल्प दिखेगा: लेयर टैब.

इस विकल्प से एक नया व्यू सामने आ जाएगा जो आपको उस फ़्रेम के दौरान सभी लेयर को पैन, स्कैन, और ज़ूम इन करने की सुविधा देता है. साथ ही, आपको हर लेयर के बनाए जाने के पीछे की वजहें भी बतानी होंगी.

इस व्यू का इस्तेमाल करके, यह ट्रैक किया जा सकता है कि आपके पास कितनी लेयर हैं. अगर स्क्रोलिंग या ट्रांज़िशन जैसी परफ़ॉर्मेंस के लिए अहम कार्रवाइयों के दौरान, कंपोज़िटिंग में बहुत ज़्यादा समय लग रहा है (आपको करीब 4 से 5 मि॰से॰ तक का टारगेट करना चाहिए), तो यहां दी गई जानकारी का इस्तेमाल करके यह देखा जा सकता है कि आपके पास कितनी लेयर हैं, वे क्यों बनाई गई थीं, और यहीं से अपने ऐप्लिकेशन में लेयर की संख्या को मैनेज किया जा सकता है.