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