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