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