मॉडर्न ब्राउज़र, दो सीएसएस प्रॉपर्टी को कम लागत में ऐनिमेट कर सकते हैं: transform और opacity.
अगर आपने किसी और चीज़ को ऐनिमेट किया है, तो हो सकता है कि आपको 60 फ़्रेम प्रति सेकंड (एफ़पीएस) का स्मूथ ऐनिमेशन न मिले.
इस पोस्ट में बताया गया है कि ऐसा क्यों होता है.
ऐनिमेशन की परफ़ॉर्मेंस और फ़्रेम रेट
यह माना जाता है कि वेब पर किसी भी चीज़ को ऐनिमेट करते समय, फ़्रेम रेट 60 एफ़पीएस होना चाहिए. इस फ़्रेम रेट से यह पक्का होगा कि आपके ऐनिमेशन शानदार दिखें. वेब पर फ़्रेम, वह समय होता है जो स्क्रीन को अपडेट करने और फिर से पेंट करने के लिए ज़रूरी सभी काम करने में लगता है. अगर हर फ़्रेम 16.7 मि॰से॰ (1000 मि॰से॰ / 60 ≈ 16.7) में पूरा नहीं होता है, तो उपयोगकर्ताओं को देरी महसूस होगी.
रेंडरिंग पाइपलाइन
किसी वेबपेज पर कुछ दिखाने के लिए, ब्राउज़र को क्रम से इन चरणों को पूरा करना होता है:
- स्टाइल: एलिमेंट पर लागू होने वाली स्टाइल का हिसाब लगाएं.
- लेआउट: हर एलिमेंट के लिए ज्यामिति और पोज़िशन जनरेट करता है.
- पेंट करें: हर एलिमेंट के लिए पिक्सल भरें.
- कंपोज़िट: एलिमेंट को लेयर में अलग करें और लेयर को स्क्रीन पर बनाएं.
इन चार चरणों को ब्राउज़र का रेंडरिंग पाइपलाइन कहा जाता है.
जब किसी ऐसे पेज पर कोई एलिमेंट ऐनिमेट किया जाता है जो पहले से लोड हो चुका है, तो ये चरण फिर से दोहराने पड़ते हैं. यह प्रोसेस उस चरण से शुरू होती है जिसमें बदलाव करना ज़रूरी होता है, ताकि ऐनिमेशन हो सके.
जैसा कि पहले बताया गया है, ये चरण क्रम से पूरे किए जाते हैं. उदाहरण के लिए, अगर लेआउट बदलने वाली किसी चीज़ को ऐनिमेट किया जाता है, तो पेंट और कंपोज़िट चरणों को भी फिर से चलाना होगा. इसलिए, लेआउट में बदलाव करने वाली किसी चीज़ को ऐनिमेट करना, कंपोज़िटिंग में बदलाव करने वाली किसी चीज़ को ऐनिमेट करने से ज़्यादा महंगा होता है.
लेआउट प्रॉपर्टी को ऐनिमेट करना
लेआउट में बदलाव करने के लिए, बदलाव से जुड़े सभी एलिमेंट की ज्यामिति (जगह और साइज़) का हिसाब लगाना होता है.
किसी एक एलिमेंट में बदलाव करने पर,
दूसरे एलिमेंट की ज्यामिति को फिर से कैलकुलेट करना पड़ सकता है.
उदाहरण के लिए, अगर आपने <html> एलिमेंट की चौड़ाई बदली है, तो हो सकता है कि उसके किसी चाइल्ड एलिमेंट पर इसका असर पड़े.
एलिमेंट के ओवरफ़्लो होने और एक-दूसरे पर असर डालने की वजह से,
ट्री में नीचे की ओर किए गए बदलावों की वजह से, कभी-कभी लेआउट की कैलकुलेशन ऊपर तक हो सकती है.
दिखने वाले एलिमेंट का ट्री जितना बड़ा होगा, लेआउट कैलकुलेशन करने में उतना ही ज़्यादा समय लगेगा.
पेंट प्रॉपर्टी को ऐनिमेट करना
पेंट एक ऐसी प्रोसेस है जिससे यह तय किया जाता है कि स्क्रीन पर एलिमेंट किस क्रम में पेंट किए जाने चाहिए. यह अक्सर पाइपलाइन में मौजूद सभी टास्क में सबसे ज़्यादा समय तक चलने वाला टास्क होता है.
मॉडर्न ब्राउज़र में ज़्यादातर पेंटिंग, सॉफ़्टवेयर रास्टराइज़र में की जाती है. आपके ऐप्लिकेशन में मौजूद एलिमेंट को लेयर में ग्रुप करने के तरीके के आधार पर, बदले गए एलिमेंट के अलावा अन्य एलिमेंट को भी पेंट करने की ज़रूरत पड़ सकती है.
कंपोज़िट प्रॉपर्टी को ऐनिमेट करना
कंपोज़िटिंग एक ऐसी प्रोसेस है जिसमें पेज को लेयर में अलग किया जाता है. इसके बाद, पेज कैसा दिखना चाहिए, इस बारे में जानकारी को पिक्सल (रास्टराइज़ेशन) में बदला जाता है. आखिर में, लेयर को एक साथ रखकर पेज बनाया जाता है (कंपोज़िटिंग).
इसलिए, opacity प्रॉपर्टी को उन चीज़ों की सूची में शामिल किया गया है जिन्हें ऐनिमेट करना सस्ता होता है.
जब तक यह प्रॉपर्टी अपनी लेयर में है, तब तक कंपोज़िटिंग के दौरान GPU, इसमें होने वाले बदलावों को मैनेज कर सकता है.
Chromium पर आधारित ब्राउज़र और WebKit, opacity पर सीएसएस ट्रांज़िशन या ऐनिमेशन वाले किसी भी एलिमेंट के लिए एक नई लेयर बनाते हैं.
लेयर क्या होती है?
एनिमेशन या ट्रांज़िशन वाले आइटम को नई लेयर पर रखने से, ब्राउज़र को सिर्फ़ उन आइटम को फिर से पेंट करना होता है. उसे बाकी सभी आइटम को फिर से पेंट करने की ज़रूरत नहीं होती. आपको शायद Photoshop में लेयर के कॉन्सेप्ट के बारे में पता होगा. इसमें कई एलिमेंट होते हैं, जिन्हें एक साथ मूव किया जा सकता है. ब्राउज़र रेंडरिंग लेयर भी इसी तरह काम करती हैं.
ब्राउज़र यह तय करने में अच्छा काम करता है कि नई लेयर पर कौनसे एलिमेंट होने चाहिए. हालांकि, अगर वह किसी एलिमेंट को शामिल नहीं करता है, तो लेयर बनाने के लिए मजबूर करने के तरीके मौजूद हैं. इसके बारे में बेहतर परफ़ॉर्मेंस वाले ऐनिमेशन बनाने का तरीका लेख में बताया गया है. हालांकि, नई लेयर बनाते समय सावधानी बरतनी चाहिए, क्योंकि हर लेयर मेमोरी का इस्तेमाल करती है. कम मेमोरी वाले डिवाइसों पर नई लेयर बनाने से, परफ़ॉर्मेंस से जुड़ी समस्या और बढ़ सकती है. इसके अलावा, हर लेयर की बनावट को जीपीयू पर अपलोड करना होता है. इसलिए, सीपीयू और जीपीयू के बीच बैंडविड्थ की सीमाएं लागू हो सकती हैं.
सीएसएस बनाम JavaScript की परफ़ॉर्मेंस
आपके मन में यह सवाल आ सकता है कि परफ़ॉर्मेंस के हिसाब से, ऐनिमेशन के लिए सीएसएस या JavaScript में से किसका इस्तेमाल करना बेहतर है?
सीएसएस पर आधारित ऐनिमेशन और वेब ऐनिमेशन (उन ब्राउज़र में जो एपीआई के साथ काम करते हैं) को आम तौर पर कंपोज़िटर थ्रेड के तौर पर जाने जाने वाले थ्रेड पर हैंडल किया जाता है. यह ब्राउज़र की मुख्य थ्रेड से अलग होती है. मुख्य थ्रेड में स्टाइलिंग, लेआउट, पेंटिंग, और JavaScript को लागू किया जाता है. इसका मतलब है कि अगर ब्राउज़र मुख्य थ्रेड पर कुछ मुश्किल टास्क कर रहा है, तो ये ऐनिमेशन बिना किसी रुकावट के चलते रहेंगे.
इस लेख में बताया गया है कि ट्रांसफ़ॉर्म और ओपैसिटी में किए गए अन्य बदलावों को भी कई मामलों में कंपोज़िटर थ्रेड मैनेज कर सकता है.
अगर कोई ऐनिमेशन, पेंट, लेआउट या दोनों को ट्रिगर करता है, तो मुख्य थ्रेड को काम करना होगा. यह सीएसएस और JavaScript, दोनों तरह के ऐनिमेशन के लिए सही है. साथ ही, लेआउट या पेंट का ओवरहेड, सीएसएस या JavaScript के एक्ज़ीक्यूशन से जुड़े किसी भी काम से ज़्यादा होगा. इसलिए, इस सवाल का कोई मतलब नहीं रह जाता.