वेब पेजों पर मौजूद कुछ ऐनिमेशन को रेंडरिंग पाइपलाइन के कंपोजिटर स्टेज में पूरी तरह से मैनेज किया जा सकता है.
कंपोज़िट नहीं किए गए ऐनिमेशन को बनाने में ज़्यादा मेहनत लगती है. साथ ही, ये ऐनिमेशन लो-एंड फ़ोन पर अजीब (बेहतर नहीं) दिख सकते हैं. ऐसा तब भी हो सकता है, जब मुख्य थ्रेड पर ज़्यादा परफ़ॉर्मेंस वाले टास्क चल रहे हों.
बिना कॉम्पोज़ किए गए ऐनिमेशन, आपके पेज के कुल लेआउट शिफ़्ट (सीएलएस) को भी बढ़ा सकते हैं. इसकी वजह यह है कि इनकी वजह से उन एलिमेंट में असल बदलाव होता है जिन्हें सीएलएस एल्गोरिदम मेज़र करता है. इससे, अन्य एलिमेंट में भी बदलाव हो सकता है. कॉम्पोज़िट किए गए ऐनिमेशन की वजह से, दूसरे एलिमेंट शिफ़्ट नहीं होंगे. इसलिए, उन्हें सीएलएस से बाहर रखा जाता है. सीएलएस को कम करने से, Lighthouse की परफ़ॉर्मेंस का स्कोर बेहतर होगा.
बैकग्राउंड
एचटीएमएल, सीएसएस, और JavaScript को पिक्सल में बदलने के लिए, ब्राउज़र के एल्गोरिदम को एक साथ रेंडरिंग पाइपलाइन कहा जाता है.
अगर आपको रेंडरिंग पाइपलाइन के हर चरण का मतलब नहीं पता है, तो कोई बात नहीं. फ़िलहाल, यह समझना ज़रूरी है कि रेंडरिंग पाइपलाइन के हर चरण में, ब्राउज़र नया डेटा बनाने के लिए, पिछले ऑपरेशन के नतीजे का इस्तेमाल करता है. उदाहरण के लिए, अगर आपका कोड ऐसा कुछ करता है जिससे लेआउट ट्रिगर होता है, तो पेंट और कंपोजिट चरणों को फिर से चलाना होगा. बिना कॉम्पोज़ किए गए ऐनिमेशन में, रेंडरिंग पाइपलाइन (स्टाइल, लेआउट या पेंट) के किसी शुरुआती चरण को ट्रिगर किया जाता है. बिना कॉम्पोज़ किए गए ऐनिमेशन की परफ़ॉर्मेंस खराब होती है, क्योंकि वे ब्राउज़र को ज़्यादा काम करने के लिए मजबूर करते हैं.
रेंडरिंग पाइपलाइन के बारे में ज़्यादा जानने के लिए, यहां दिए गए संसाधन देखें:
- आधुनिक वेब ब्राउज़र के बारे में खास जानकारी (तीसरा भाग)
- पेंट करने की प्रक्रिया को आसान बनाना और पेंट किए जाने वाले हिस्सों को कम करना
- सिर्फ़ कंपोजिटर प्रॉपर्टी का इस्तेमाल करना और लेयर की संख्या मैनेज करना
Lighthouse, बिना कॉम्पोज़ किए गए ऐनिमेशन का पता कैसे लगाता है
जब किसी ऐनिमेशन को कंपोज नहीं किया जा सकता, तो Chrome, DevTools ट्रेस में इसकी वजहों की जानकारी देता है. Lighthouse इसी जानकारी को पढ़ता है. Lighthouse, उन DOM नोड की सूची बनाता है जिनमें ऐसे ऐनिमेशन हैं जिन्हें कॉम्पोज़ नहीं किया गया था. साथ ही, हर ऐनिमेशन के लिए गड़बड़ी की वजह भी बताता है.
यह पक्का करने का तरीका कि ऐनिमेशन को कॉम्पोज़ किया गया हो
सिर्फ़ कंपोजिटर प्रॉपर्टी का इस्तेमाल करें और लेयर की संख्या मैनेज करें और बेहतर परफ़ॉर्मेंस वाले ऐनिमेशन लेख पढ़ें.