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

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

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

इस सेक्शन में दो मुख्य फ़ैक्टर हैं, जिनसे पेज की परफ़ॉर्मेंस पर असर पड़ता है: मैनेज की जानी वाली कंपोजिटर लेयर की संख्या और ऐनिमेशन के लिए इस्तेमाल की जाने वाली प्रॉपर्टी.

खास जानकारी

• अपने ऐनिमेशन के लिए, ट्रांसफ़ॉर्म और ओपैसिटी में बदलाव करें.
• will-change या translateZ का इस्तेमाल करके, मूविंग एलिमेंट का प्रमोशन करें.
• प्रचार के नियमों का ज़रूरत से ज़्यादा इस्तेमाल करने से बचें; लेयर के लिए मेमोरी और मैनेजमेंट की ज़रूरत होती है.

ऐनिमेशन के लिए ट्रांसफ़ॉर्म और ओपैसिटी में बदलाव करना

पिक्सल पाइपलाइन का सबसे अच्छा परफ़ॉर्म करने वाला वर्शन, लेआउट और पेंट, दोनों से बचता है. साथ ही, इसमें सिर्फ़ कॉम्पोज़िटिंग में बदलाव करने की ज़रूरत होती है:

इसे पाने के लिए आपको प्रॉपर्टी में बदलाव करना होगा, जिन्हें सिर्फ़ कंपोज़िटर मैनेज कर सकता है. आज सिर्फ़ दो प्रॉपर्टी हैं जिनके लिए वही सही है - transform और opacity:

transform और opacity का इस्तेमाल करते समय ध्यान रखें कि जिस एलिमेंट में इन प्रॉपर्टी को बदला जा रहा है वह अपनी कंपोजिटर लेयर पर होना चाहिए. लेयर बनाने के लिए, आपको उस एलिमेंट का प्रमोशन करना होगा जिसके बारे में हम आगे बात करेंगे.

उन एलिमेंट का प्रमोशन करना जिन्हें आपको ऐनिमेट करना है

जैसा कि हमने "पेंट की जटिलता को आसान बनाएं और पेंट एरिया कम करें" सेक्शन में बताया है कि आपको उन एलिमेंट का प्रमोशन करना चाहिए जिन्हें ऐनिमेट करना है (इसकी वजह यह भी है कि ज़रूरत से ज़्यादा न बनाएं!). साथ ही, उनकी खुद की लेयर में भी बदलाव करें:

.moving-element {
  will-change: transform;
}

इसके अलावा, पुराने ब्राउज़र या ऐसे ब्राउज़र के लिए जिनमें will-change की सुविधा काम नहीं करती:

.moving-element {
  transform: translateZ(0);
}

लेयर मैनेज करना और लेयर एक्सप्लोरेशन से बचना

फिर, यह जानना आकर्षक हो सकता है कि लेयर अक्सर परफ़ॉर्मेंस में मदद करते हैं, ताकि आपके पेज के सभी एलिमेंट का प्रमोशन इस तरह से हो सके:

* {
  will-change: transform;
  transform: translateZ(0);
}

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

अपने ऐप्लिकेशन की लेयर को समझने के लिए, Chrome DevTools का इस्तेमाल करें

अपने ऐप्लिकेशन में लेयर के बारे में जानने के लिए और यह जानने के लिए कि किसी एलिमेंट में लेयर क्यों है, आपको Chrome DevTools की टाइमलाइन में Paint प्रोफ़ाइलर को चालू करना होगा:

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

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

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

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