खास जानकारी: Chromium, SVG ऐनिमेशन, प्रतिशत के हिसाब से होने वाले ट्रांसफ़ॉर्मेशन, और बैकग्राउंड के रंग और क्लिप पाथ ऐनिमेशन के लिए, हार्डवेयर से तेज़ी लाने की अपनी क्षमताओं को जल्द ही अपने-आप अपडेट कर रहा है.
जहां वेब ऐनिमेशन की परफ़ॉर्मेंस की बात आती है, वहां "हार्डवेयर की मदद से तेज़ी से काम करने की सुविधा" और "जीपीयू-एक्सेलरेटेड" ऐनिमेशन का इस्तेमाल किया जा सकता है. लेकिन इनका क्या मतलब है? हार्डवेयर से तेज़ी से लोड होने वाली स्टाइल ऐसी होती हैं जो विज़ुअल स्टाइल को रेंडर करने के लिए सीपीयू (सेंट्रल प्रोसेसिंग यूनिट) के बजाय, जीपीयू (ग्राफ़िकल प्रोसेसिंग यूनिट) का इस्तेमाल करती हैं. इसकी वजह यह है कि जीपीयू, सीपीयू की तुलना में ज़्यादा तेज़ी से किसी वेब पेज पर विज़ुअल बदलावों को रेंडर कर सकता है.
ग्राफ़िक-इंटेसिव ट्रांज़िशन और ऐनिमेशन को ऑफ़लोड करने के लिए जीपीयू का इस्तेमाल करने का मतलब है स्मूद विज़ुअल और कम जैंक, क्योंकि इन ऐनिमेशन पर मुख्य थ्रेड का कोई असर नहीं पड़ता. मुख्य थ्रेड से ऐनिमेशन हटाने पर, आपके ऐनिमेशन पेज पर चल रही अन्य ऐक्टिव स्क्रिप्ट की क्रस्ट को बायपास कर देते हैं. इससे आपके विज़ुअल धीमा हो जाते हैं और जैंक बन जाते हैं.
हार्डवेयर से तेज़ी से चलने वाले ऐनिमेशन चालू करना
हार्डवेयर से चलने वाले ऐनिमेशन, लेयर के रूप में कंपोज़ किए जाते हैं. इससे डेवलपर को 60 FPS (फ़्रेम प्रति सेकंड) वाले ऐनिमेशन पाने में मदद मिलती है, जिससे विज़ुअल रेंडरिंग की परफ़ॉर्मेंस बेहतर होती है. फ़िलहाल, वेब पर हार्डवेयर की मदद से चलने वाले ऐनिमेशन और ट्रांज़िशन तय करने और चालू करने के कुछ तरीके हैं:
- सीएसएस
transformफ़ंक्शन का इस्तेमाल करें याopacityयाfilterवैल्यू का ट्रांज़िशन करें - अपने एलिमेंट में
will-changeप्रॉपर्टी जोड़ें. OffscreenCanvasसे ऐनिमेशन वाली कैनवस ड्रॉइंग बनाएं- WebGL 3D ड्रॉइंग बनाना
opacity, filter, और
transform शामिल हैं. हालांकि, background-color और clip-path जल्द ही इस सूची में शामिल हो जाएंगे. Chromium में, अन्य कौनसी चीज़ें डिफ़ॉल्ट रूप से हार्डवेयर की एक्सेलरेटेड मोड बन रही हैं? डेवलपर, जल्द ही अनुरोध करने के लिए तैयार हैं. इनमें SVG ऐनिमेशन भी शामिल हैं.
हार्डवेयर से तेज़ी लाने वाले SVG ऐनिमेशन
SVG किसी भी वेबसाइट के लिए एक बेहतरीन सुविधा है और अब SVG के साथ होने वाले इंटरैक्शन की परफ़ॉर्मेंस बेहतर हो सकती है. Chromium 89 से, SVG ऐनिमेशन पर हार्डवेयर की तेज़ी को डिफ़ॉल्ट रूप से चालू करने के लिए, Chrome, Firefox की पसंद से जुड़ा होगा. आपको, डेवलपर को क्या करना होगा? कुछ नहीं—यह Chromium 89+ में SVG ऐनिमेशन के लिए अपने-आप लागू हो जाएगा.
उदाहरण
हार्डवेयर से तेज़ी लाने की सुविधा चालू होने और उसके बिना, SVG ऐनिमेशन के बीच के अंतर को देखते हैं. लोडिंग इंडिकेटर, आम तौर पर इस्तेमाल किए जाने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट होते हैं, जैसे कि facebook.com पर देखा जा सकता है. ये इंडिकेटर, सर्वर पर किए जा रहे काम की जानकारी देते हैं. इस दौरान, उपयोगकर्ता जवाब का इंतज़ार करता है. यहां दिखाए गए मामले में, जवाब के तौर पर साइडबार में अन्य नतीजे लोड किए जाएंगे.
DevTools खोलने पर, हम प्रोफ़ाइल बनाना शुरू कर सकते हैं. साथ ही, सीपीयू और जीपीयू की मदद से तेज़ी से लोड होने वाले ऐनिमेशन अनुभव के बीच फ़र्क़ देख सकते हैं.
आपको बाईं ओर (Chromium 87) स्क्रीन पर, स्पिनर के ऐनिमेशन लेने पर हर बार रीपेंट किया जाता है (जो लगातार होता रहता है). दाईं ओर कोई रीपेंटिंग नहीं है (Chromium 89 और Firefox). पेंट फ़्लैशिंग को चालू करते समय, हम DevTools रेंडरिंग पैनल में इसकी जांच कर सकते हैं.
परफ़ॉर्मेंस पैनल को ध्यान से देखने पर, आपको यह इफ़ेक्ट फिर से दिखेगा. साथ ही, यह भी दिखेगा कि आपकी वेब प्रॉपर्टी की पूरी परफ़ॉर्मेंस पर इसका क्या असर पड़ता है. आपको ऐनिमेशन के लिए पूरी तरह से रेंडर करने और पेंटिंग करने में लगने वाला समय नहीं बचता है, मतलब स्मूद ऐनिमेशन और ज़्यादा बेहतर परफ़ॉर्म करने वाले ऐप्लिकेशन हैं. हालांकि, Facebook इस SVG-आधारित लोडर को तब तक शिपिंग नहीं करेगा, जब तक कि ब्राउज़र पर हार्डवेयर से तेज़ी से लोड होने वाले SVG के लिए सहायता ज़्यादा नहीं हो जाती. हालांकि, इससे थीम, स्केलिंग, और रिज़ॉल्यूशन की ज़रूरी शर्तों को पूरा करने और रखरखाव में आसानी होगी.
प्रतिशत ऐनिमेशन
इंटरैक्शन टीम भी Chromium 89 में, ऐनिमेशन के प्रतिशत में बदलाव करने के लिए सहायता उपलब्ध कराती है. प्रतिशत-आधारित ऐनिमेशन ऐसे इंटरैक्शन का ब्यौरा देते हैं जिनमें प्रतिशत-आधारित मूवमेंट शामिल होता है. उदाहरण के लिए, किसी चीज़ को 20% तक बढ़ाया जा सकता है या translateX: -100% जैसे किसी नाम का इस्तेमाल करके, रिस्पॉन्सिव साइडबार मेन्यू को ऑफ़-स्क्रीन से स्लाइड किया जा सकता है.
इस तरह के यूज़र इंटरफ़ेस (यूआई) ऐनिमेशन आम तौर पर आम तौर पर होते हैं, लेकिन फ़िलहाल हार्डवेयर से तेज़ी लाने की सुविधा का फ़ायदा नहीं लेते हैं. इसकी वजह यह है कि पहले हम इस तरह के ऐनिमेशन को कंपोज़ नहीं कर पा रहे थे. ट्रांसफ़ॉर्म में प्रतिशत, बॉक्स के साइज़ (जैसे कि लेआउट) पर निर्भर करते हैं. हालांकि, अब जब तक लेआउट साइज़ हर फ़्रेम में बदलाव नहीं कर रहा है, तब तक ब्राउज़र पूरी ट्रांसफ़ॉर्म वैल्यू का पहले से हिसाब लगा सकता है और उन्हें इस तरह चला सकता है जैसे डेवलपर ने पिक्सल वैल्यू दी हो. अच्छी खबर यह है कि Chromium की टीम इस सुविधा पर काम कर रही है. जल्द ही, इस तरह के ऐनिमेशन अपने-आप कंपोज़िट हो जाएंगे और हार्डवेयर की मदद से तेज़ी से काम करेंगे.
आगे क्या आने वाला है?
अपडेट किए गए इन ऐनिमेशन की वजह से, वेब स्टाइलिंग ज़्यादा बेहतर हो जाएगी. जैसा कि ऊपर बताया गया है, टीम हमेशा यह देखती रहती है कि आने वाले समय में वेब की क्या ज़रूरतें उभरकर सामने आ रही हैं. फ़िलहाल, हम background-color और clip-path को Chromium के आने वाले वर्शन में अपने-आप हार्डवेयर इस्तेमाल करने की सुविधा का इस्तेमाल करने के लिए तैयार हैं.
ट्रांज़िशन और इफ़ेक्ट के लिए, background-color का इस्तेमाल ज़्यादा इस्तेमाल किए जाने की वजह से यह एक प्राथमिकता है. clip-path की वजह से, वेब पर ट्रांज़िशन की बेहतर परफ़ॉर्मेंस मिलती है. जब परफ़ॉर्मेंस, इंटरैक्टिविटी से मेल खाती है, तो
सभी को फ़ायदा होता है!
कवर इमेज: अनस्प्लैश के लिए Siora फ़ोटोग्राफ़ी.