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