ऐनिमेशन के स्मूदनेस मेट्रिक की ओर

ऐनिमेशन को मेज़र करने, ऐनिमेशन फ़्रेम के बारे में सोचने, और पेज की परफ़ॉर्मेंस को बेहतर बनाने के तरीके के बारे में जानें.

Behdad Bakhshinategh

Jonathan Ross

Michal Mocny

आपने शायद ऐसे पेजों का इस्तेमाल किया होगा जो स्क्रोल करने या ऐनिमेशन के दौरान "हकलाते" या "फ़्रीज़" हो जाते हैं. हम यह कहना चाहते हैं कि ये अनुभव बेहतर नहीं हैं. इस तरह की समस्याओं को हल करने के लिए, Chrome की टीम, ऐनिमेशन का पता लगाने के लिए लैब टूलिंग में ज़्यादा सहायता जोड़ने पर काम कर रही है. साथ ही, Chromium में रेंडरिंग पाइपलाइन के डाइग्नोस्टिक्स को लगातार बेहतर बना रही है.

हम आपके साथ हाल ही में हुई कुछ प्रोग्रेस शेयर करना चाहते हैं. साथ ही, टूल इस्तेमाल करने के बारे में दिशा-निर्देश देना चाहते हैं. इसके अलावा, हम आने वाले समय में ऐनिमेशन की परफ़ॉर्मेंस को बेहतर बनाने के लिए, कुछ नए आइडिया पर चर्चा करना चाहते हैं. हमेशा की तरह, हमें आपके सुझाव पाकर खुशी होगी.

इस पोस्ट में तीन मुख्य विषयों के बारे में बताया जाएगा:

• ऐनिमेशन और ऐनिमेशन फ़्रेम की झलक.
• फ़िलहाल, हम ऐनिमेशन की स्मूदनेस को मेज़र करने के बारे में सोच रहे हैं.
• लैब टूलिंग का इस्तेमाल करने के लिए, यहां कुछ सुझाव दिए गए हैं.

ऐनिमेशन क्या होते हैं?

ऐनिमेशन से कॉन्टेंट को दिलचस्प बनाया जा सकता है! कॉन्टेंट को मूव करके, खास तौर पर उपयोगकर्ता के इंटरैक्शन के जवाब में, ऐनिमेशन से अनुभव को ज़्यादा सहज, समझने में आसान, और मज़ेदार बनाया जा सकता है.

हालांकि, खराब तरीके से लागू किए गए एनिमेशन या बहुत ज़्यादा एनिमेशन जोड़ने से, उपयोगकर्ता अनुभव खराब हो सकता है. साथ ही, इससे उपयोगकर्ता को मज़ा नहीं आएगा. हम सभी ने शायद ऐसे इंटरफ़ेस का इस्तेमाल किया होगा जिसमें बहुत सारे "मददगार" ट्रांज़िशन इफ़ेक्ट जोड़े गए हों. हालांकि, ये इफ़ेक्ट ठीक से काम न करने पर, उपयोगकर्ता अनुभव को खराब कर देते हैं. इसलिए, कुछ उपयोगकर्ता मोशन कम करने की सुविधा को प्राथमिकता दे सकते हैं. यह उपयोगकर्ता की प्राथमिकता होती है और आपको इसका सम्मान करना चाहिए.

ऐनिमेशन कैसे काम करते हैं?

खास जानकारी के तौर पर, रेंडरिंग पाइपलाइन में कुछ क्रमिक चरण शामिल होते हैं:

1. स्टाइल: एलिमेंट पर लागू होने वाली स्टाइल का हिसाब लगाता है.
2. लेआउट: हर एलिमेंट के लिए, ज्यामिति और पोज़िशन जनरेट करें.
3. पेंट: हर एलिमेंट के पिक्सल को लेयर में भरें.
4. कंपोज़िट: लेयर को स्क्रीन पर ड्रॉ करें.

ऐनिमेशन को कई तरह से तय किया जा सकता है. हालांकि, ये सभी बुनियादी तौर पर इनमें से किसी एक तरीके से काम करते हैं:

• लेआउट प्रॉपर्टी में बदलाव करना.
• पेंट प्रॉपर्टी में बदलाव करना.
• कंपोज़िट प्रॉपर्टी में बदलाव किया जा रहा है.

ये चरण क्रम से होते हैं. इसलिए, यह ज़रूरी है कि एनिमेशन को उन प्रॉपर्टी के हिसाब से तय किया जाए जो पाइपलाइन में आगे हैं. अपडेट जितनी जल्दी किया जाएगा, लागत उतनी ही ज़्यादा होगी. साथ ही, अपडेट के ठीक से होने की संभावना भी कम हो जाएगी. (ज़्यादा जानकारी के लिए, रेंडरिंग परफ़ॉर्मेंस देखें.)

लेआउट प्रॉपर्टी को ऐनिमेट करना आसान हो सकता है. हालांकि, ऐसा करने पर कुछ खर्च आता है. भले ही, यह खर्च तुरंत न दिखे. जहां भी मुमकिन हो, कंपोज़िट प्रॉपर्टी में हुए बदलावों के हिसाब से ऐनिमेशन तय किए जाने चाहिए.

डिक्लेरेटिव सीएसएस ऐनिमेशन तय करना या वेब ऐनिमेशन का इस्तेमाल करना, और यह पक्का करना कि आपने कंपोज़िट प्रॉपर्टी को ऐनिमेट किया हो, ऐनिमेशन को बेहतर और असरदार बनाने की दिशा में पहला कदम है. हालांकि, इसके बावजूद सिर्फ़ इससे वेब ऐनिमेशन के बेहतर तरीके से काम करने की गारंटी नहीं मिलती. इसकी वजह यह है कि बेहतर तरीके से काम करने वाले वेब ऐनिमेशन की भी परफ़ॉर्मेंस की सीमाएं होती हैं. इसलिए, मेज़रमेंट करना हमेशा ज़रूरी होता है!

ऐनिमेशन फ़्रेम क्या होते हैं?

पेज के विज़ुअल प्रज़ेंटेशन में किए गए बदलावों को दिखने में समय लगता है. विज़ुअल में बदलाव होने पर, एक नया ऐनिमेशन फ़्रेम बनेगा. यह फ़्रेम आखिर में उपयोगकर्ता के डिसप्ले पर रेंडर किया जाता है.

यह कुछ समय के अंतराल पर अपडेट दिखाता है, ताकि विज़ुअल अपडेट को बैच किया जा सके. कई डिसप्ले, एक तय समय के अंतराल पर अपडेट होते हैं. जैसे, एक सेकंड में 60 बार (यानी कि 60 हर्ट्ज़). कुछ नए डिसप्ले में, रीफ़्रेश रेट ज़्यादा हो सकता है. जैसे, 90 से 120 हर्ट्ज़. अक्सर ये डिसप्ले, ज़रूरत के हिसाब से रीफ़्रेश रेट के बीच सक्रिय रूप से अडैप्ट कर सकते हैं. ये पूरी तरह से वैरिएबल फ़्रेम रेट भी ऑफ़र कर सकते हैं.

किसी भी ऐप्लिकेशन, जैसे कि गेम या ब्राउज़र का मकसद, विज़ुअल से जुड़े सभी अपडेट को प्रोसेस करना होता है. साथ ही, हर बार समयसीमा के अंदर, विज़ुअल तौर पर पूरा ऐनिमेशन फ़्रेम जनरेट करना होता है. ध्यान दें कि यह लक्ष्य, ब्राउज़र के अन्य अहम टास्क से पूरी तरह अलग है. जैसे, नेटवर्क से कॉन्टेंट को तेज़ी से लोड करना या JavaScript टास्क को असरदार तरीके से पूरा करना.

कभी-कभी, डिसप्ले की ओर से तय की गई समयसीमा में सभी विज़ुअल अपडेट पूरे करना बहुत मुश्किल हो सकता है. ऐसा होने पर, ब्राउज़र एक फ़्रेम छोड़ देता है. आपकी स्क्रीन काली नहीं होती, बल्कि वही कॉन्टेंट बार-बार दिखता है. आपको कुछ समय के लिए वही विज़ुअल अपडेट दिखता है. यानी, वही ऐनिमेशन फ़्रेम जो पिछली फ़्रेम के तौर पर दिखाया गया था.

असल में, ऐसा अक्सर होता है! यह ज़रूरी नहीं है कि यह बदलाव दिख भी पाए. खास तौर पर, स्टैटिक या दस्तावेज़ जैसे कॉन्टेंट के लिए ऐसा होता है. इस तरह का कॉन्टेंट, वेब प्लैटफ़ॉर्म पर आम तौर पर दिखता है. फ़्रेम तब ही ड्रॉप होते हैं, जब अहम विज़ुअल अपडेट होते हैं. जैसे, ऐनिमेशन. इसके लिए, हमें ऐनिमेशन अपडेट की एक स्थिर स्ट्रीम की ज़रूरत होती है, ताकि मोशन को आसानी से दिखाया जा सके.

एनिमेशन फ़्रेम पर किन चीज़ों का असर पड़ता है?

वेब डेवलपर, ब्राउज़र की इस क्षमता पर काफ़ी असर डाल सकते हैं कि वह कितनी जल्दी और असरदार तरीके से विज़ुअल अपडेट रेंडर और प्रज़ेंट करता है!

कुछ उदाहरण:

• ऐसे कॉन्टेंट का इस्तेमाल करना जिसे टारगेट डिवाइस पर तुरंत डिकोड करने के लिए, बहुत ज़्यादा जगह या संसाधनों की ज़रूरत होती है.
• बहुत ज़्यादा लेयर का इस्तेमाल करना, जिसके लिए बहुत ज़्यादा GPU मेमोरी की ज़रूरत होती है.
• बहुत जटिल सीएसएस स्टाइल या वेब ऐनिमेशन तय करना.
• ऐसे डिज़ाइन एंटी-पैटर्न का इस्तेमाल करना जिनसे फ़ास्ट रेंडरिंग ऑप्टिमाइज़ेशन बंद हो जाते हैं.
• मुख्य थ्रेड पर बहुत ज़्यादा JS काम करता है. इससे लंबे समय तक चलने वाले टास्क होते हैं, जो विज़ुअल अपडेट को ब्लॉक करते हैं.

हालांकि, आपको यह कैसे पता चलेगा कि किसी ऐनिमेशन फ़्रेम को रेंडर होने में तय सीमा से ज़्यादा समय लगा है और इस वजह से फ़्रेम ड्रॉप हुआ है?

requestAnimationFrame() पोलिंग का इस्तेमाल किया जा सकता है. हालांकि, इसमें कई कमियां हैं. requestAnimationFrame() या "rAF" ब्राउज़र को बताता है कि आपको ऐनिमेशन करना है. साथ ही, रेंडरिंग पाइपलाइन के अगले पेंट स्टेज से पहले, ऐसा करने का मौका मांगता है. अगर आपका कॉलबैक फ़ंक्शन, उम्मीद के मुताबिक समय पर कॉल नहीं किया जाता है, तो इसका मतलब है कि पेंट नहीं किया गया है और एक या उससे ज़्यादा फ़्रेम छोड़ दिए गए हैं. पोलिंग और यह गिनती करके कि rAF को कितनी बार कॉल किया जाता है, "फ़्रेम प्रति सेकंड" (एफ़पीएस) मेट्रिक का हिसाब लगाया जा सकता है.

let frameTimes = [];
function pollFramesPerSecond(now) {
  frameTimes = [...frameTimes.filter(t => t > now - 1000), now];
  requestAnimationFrame(pollFramesPerSecond);
  console.log('Frames per second:', frameTimes.length);
}
requestAnimationFrame(pollFramesPerSecond);

requestAnimationFrame() पोलिंग का इस्तेमाल करना कई वजहों से सही नहीं है:

• हर स्क्रिप्ट को अपना पोलिंग लूप सेट अप करना होता है.
• इससे क्रिटिकल पाथ ब्लॉक हो सकता है.
• rAF पोलिंग तेज़ होने पर भी, लगातार इस्तेमाल किए जाने पर requestIdleCallback() को लंबे समय तक निष्क्रिय ब्लॉक शेड्यूल करने से रोका जा सकता है. ये ऐसे ब्लॉक होते हैं जो एक फ़्रेम से ज़्यादा होते हैं.
• इसी तरह, लंबे समय तक निष्क्रिय रहने वाले ब्लॉक की कमी की वजह से, ब्राउज़र लंबे समय तक चलने वाले अन्य टास्क शेड्यूल नहीं कर पाता. जैसे, लंबे समय तक कचरा इकट्ठा करना और बैकग्राउंड में या अनुमान के आधार पर किए जाने वाले अन्य काम.
• अगर पोलिंग को चालू और बंद किया जाता है, तो आपको उन मामलों के बारे में जानकारी नहीं मिलेगी जिनमें फ़्रेम बजट से ज़्यादा हो गया है.
• अगर ब्राउज़र, अपडेट होने की फ़्रीक्वेंसी में बदलाव करने की सुविधा का इस्तेमाल कर रहा है, तो पोलिंग से गलत पॉज़िटिव रिपोर्ट मिलेंगी. उदाहरण के लिए, ऐसा पावर या दिखने की स्थिति की वजह से हो सकता है.
• सबसे अहम बात यह है कि यह सुविधा, सभी तरह के ऐनिमेशन अपडेट को कैप्चर नहीं करती!

मुख्य थ्रेड पर बहुत ज़्यादा काम होने से, ऐनिमेशन फ़्रेम दिखने की क्षमता पर असर पड़ सकता है. जंक सैंपल देखें. इससे पता चलेगा कि मुख्य थ्रेड पर बहुत ज़्यादा काम होने पर, rAF की मदद से बनाए गए ऐनिमेशन में फ़्रेम ड्रॉप हो जाते हैं और rAF कॉलबैक कम हो जाते हैं. साथ ही, एफ़पीएस भी कम हो जाता है. जैसे, लेआउट.

जब मुख्य थ्रेड पर ज़्यादा लोड पड़ता है, तो विज़ुअल अपडेट रुक-रुक कर होने लगते हैं. यह जंक है!

कई मेज़रमेंट टूल, इस बात पर ज़्यादा फ़ोकस करते हैं कि मुख्य थ्रेड समय पर काम कर पाए और ऐनिमेशन फ़्रेम आसानी से चल पाएं. हालांकि, यह पूरी जानकारी नहीं है! नीचे दिए गए उदाहरण पर ध्यान दें:

ऊपर दिए गए वीडियो में, एक ऐसा पेज दिखाया गया है जो समय-समय पर मुख्य थ्रेड में लंबे टास्क डालता है. इन लंबे टास्क की वजह से, पेज पर कुछ तरह के विज़ुअल अपडेट नहीं दिखते. साथ ही, आपको सबसे ऊपर बाईं ओर, requestAnimationFrame() रिपोर्ट किए गए फ़्रेम प्रति सेकंड (एफ़पीएस) में गिरावट दिख सकती है. यह गिरावट 0 तक हो सकती है.

हालांकि, इन लंबे टास्क के बावजूद पेज आसानी से स्क्रोल होता रहता है. ऐसा इसलिए होता है, क्योंकि मॉडर्न ब्राउज़र पर, स्क्रॉलिंग अक्सर थ्रेड की जाती है. यह पूरी तरह से कंपोज़िटर पर निर्भर करती है.

यह एक ऐसा उदाहरण है जिसमें मुख्य थ्रेड पर कई फ़्रेम ड्रॉप हो गए हैं. हालांकि, कंपोज़िटर थ्रेड पर स्क्रोलिंग के कई फ़्रेम अब भी डिलीवर किए गए हैं. लंबे समय तक चलने वाला टास्क पूरा होने के बाद, मुख्य थ्रेड पेंट अपडेट में कोई भी विज़ुअल बदलाव नहीं होता. rAF पोलिंग से फ़्रेम ड्रॉप होने का पता चलता है, लेकिन विज़ुअल तौर पर, उपयोगकर्ता को कोई अंतर नहीं दिखेगा!

हालांकि, ऐनिमेशन फ़्रेम के लिए यह तरीका इतना आसान नहीं है.

ऐनिमेशन फ़्रेम: ज़रूरी अपडेट

ऊपर दिए गए उदाहरण से पता चलता है कि स्टोरी में सिर्फ़ requestAnimationFrame() के अलावा और भी जानकारी है.

तो, ऐनिमेशन अपडेट और ऐनिमेशन फ़्रेम कब मायने रखते हैं? यहां कुछ शर्तें दी गई हैं. हम इन पर विचार कर रहे हैं. हमें इनके बारे में आपके सुझाव/राय/शिकायत का इंतज़ार रहेगा:

• मुख्य और कंपोज़िटर थ्रेड के अपडेट
• पेंट के अपडेट मौजूद नहीं हैं
• ऐनिमेशन का पता लगाना
• क्वालिटी बनाम संख्या

मुख्य और कंपोज़िटर थ्रेड के अपडेट

ऐनिमेशन फ़्रेम के अपडेट, बूलियन नहीं होते. ऐसा नहीं है कि फ़्रेम या तो पूरी तरह से हटा दिए जाते हैं या पूरी तरह से दिखाए जाते हैं. ऐनिमेशन फ़्रेम के कुछ हिस्से के दिखने की कई वजहें हो सकती हैं. दूसरे शब्दों में, इसमें एक साथ कुछ पुराना कॉन्टेंट और कुछ नए विज़ुअल अपडेट हो सकते हैं.

इसका सबसे सामान्य उदाहरण तब होता है, जब ब्राउज़र फ़्रेम की समयसीमा के अंदर, नई मुख्य थ्रेड का अपडेट नहीं बना पाता. हालांकि, उसके पास कंपोज़िटर थ्रेड का नया अपडेट होता है. जैसे, थ्रेड की गई स्क्रोलिंग का उदाहरण.

कंपोज़िट प्रॉपर्टी को ऐनिमेट करने के लिए, डिक्लेरेटिव ऐनिमेशन का इस्तेमाल करने का सुझाव इसलिए दिया जाता है, क्योंकि इससे ऐनिमेशन को पूरी तरह से कंपोज़िटर थ्रेड से चलाया जा सकता है. ऐसा तब भी किया जा सकता है, जब मुख्य थ्रेड व्यस्त हो. इस तरह के ऐनिमेशन, विज़ुअल अपडेट को असरदार तरीके से और साथ-साथ जनरेट करते रहते हैं.

दूसरी ओर, ऐसा भी हो सकता है कि मुख्य थ्रेड का अपडेट आखिर में प्रज़ेंटेशन के लिए उपलब्ध हो जाए. हालांकि, ऐसा कई फ़्रेम की समयसीमा खत्म होने के बाद ही होता है. यहां ब्राउज़र में कुछ नए अपडेट होंगे. हालांकि, ऐसा हो सकता है कि ये सबसे नए अपडेट न हों.

हम ऐसे फ़्रेम को आंशिक फ़्रेम मानते हैं जिनमें कुछ नए विज़ुअल अपडेट शामिल हों, लेकिन सभी नए विज़ुअल अपडेट शामिल न हों. कुछ हद तक दिखाए गए फ़्रेम, आम तौर पर दिखते हैं. आदर्श रूप से, आंशिक अपडेट में कम से कम सबसे अहम विज़ुअल अपडेट शामिल होने चाहिए. जैसे, ऐनिमेशन. हालांकि, ऐसा सिर्फ़ तब हो सकता है, जब ऐनिमेशन कंपोज़िटर थ्रेड से कंट्रोल किए जाते हों.

पेंट के अपडेट मौजूद नहीं हैं

आंशिक अपडेट का एक और उदाहरण तब देखने को मिलता है, जब इमेज जैसे मीडिया को फ़्रेम प्रज़ेंटेशन के लिए समय पर डिकोड और रास्टर नहीं किया जाता है.

इसके अलावा, अगर कोई पेज पूरी तरह से स्टैटिक है, तो भी तेज़ी से स्क्रोल करने के दौरान ब्राउज़र, विज़ुअल अपडेट रेंडर करने में पीछे रह सकते हैं. ऐसा इसलिए होता है, क्योंकि जीपीयू मेमोरी को बचाने के लिए, दिखने वाले व्यूपोर्ट से बाहर के कॉन्टेंट के पिक्सल रेंडरिंग को खारिज किया जा सकता है. पिक्सल को रेंडर होने में समय लगता है. साथ ही, उंगली से तेज़ी से स्क्रोल करने जैसे बड़े स्क्रोल के बाद, सभी चीज़ों को रेंडर होने में एक फ़्रेम से ज़्यादा समय लग सकता है. इसे आम तौर पर चेकरबोर्डिंग कहा जाता है.

हर फ़्रेम रेंडरिंग ऑपर्च्यूनिटी के साथ, यह ट्रैक किया जा सकता है कि विज़ुअल से जुड़े कितने अपडेट स्क्रीन पर दिखे. कई फ़्रेम (या समय) के हिसाब से ऐसा करने की क्षमता को मापने की प्रोसेस को आम तौर पर फ़्रेम थ्रूपुट कहा जाता है.

अगर जीपीयू पर बहुत ज़्यादा लोड है, तो ब्राउज़र (या प्लैटफ़ॉर्म) विज़ुअल अपडेट करने की दर को कम कर सकता है. इससे फ़्रेम रेट कम हो जाता है. तकनीकी तौर पर, इससे फ़्रेम अपडेट के रुकने की संख्या कम हो सकती है. हालांकि, विज़ुअल तौर पर यह अब भी कम फ़्रेम थ्रूपुट के तौर पर दिखेगा.

हालांकि, कम फ़्रेम थ्रूपुट हमेशा खराब नहीं होता. अगर पेज पर ज़्यादातर समय तक कोई गतिविधि नहीं होती है और कोई ऐनिमेशन चालू नहीं है, तो कम फ़्रेम रेट भी ज़्यादा फ़्रेम रेट जितना ही आकर्षक दिखता है. साथ ही, इससे बैटरी भी बचाई जा सकती है!

इसलिए, फ़्रेम थ्रूपुट कब मायने रखता है?

ऐनिमेशन का पता लगाना

फ़्रेम थ्रूपुट ज़्यादा होने से, खास तौर पर ऐसे समय में मदद मिलती है जब अहम ऐनिमेशन चल रहे हों. अलग-अलग तरह के ऐनिमेशन, किसी खास थ्रेड (मुख्य, कंपोज़िटर या वर्कर) से मिलने वाले विज़ुअल अपडेट पर निर्भर करते हैं. इसलिए, इसका विज़ुअल अपडेट इस बात पर निर्भर करता है कि वह थ्रेड, तय समयसीमा के अंदर अपना अपडेट दे. हम कहते हैं कि किसी थ्रेड से स्मूथनेस पर असर पड़ता है. ऐसा तब होता है, जब कोई ऐनिमेशन चालू हो और वह थ्रेड के अपडेट पर निर्भर हो.

कुछ तरह के ऐनिमेशन को आसानी से तय किया जा सकता है और उनका पता लगाया जा सकता है. डिक्लेरेटिव ऐनिमेशन या उपयोगकर्ता के इनपुट से ट्रिगर होने वाले ऐनिमेशन को, JavaScript से ट्रिगर होने वाले ऐनिमेशन की तुलना में ज़्यादा आसानी से तय किया जा सकता है. JavaScript से ट्रिगर होने वाले ऐनिमेशन, ऐनिमेट की जा सकने वाली स्टाइल प्रॉपर्टी में समय-समय पर होने वाले अपडेट के तौर पर लागू किए जाते हैं.

requestAnimationFrame() का इस्तेमाल करने पर भी, यह हमेशा नहीं माना जा सकता कि हर rAF कॉल से विज़ुअल अपडेट या ऐनिमेशन जनरेट हो रहा है. उदाहरण के लिए, सिर्फ़ फ़्रेम रेट को ट्रैक करने के लिए rAF पोलिंग का इस्तेमाल करने से, स्मूदनेस के मेज़रमेंट पर कोई असर नहीं पड़ना चाहिए. ऐसा इसलिए, क्योंकि कोई विज़ुअल अपडेट नहीं है.

क्वालिटी बनाम संख्या

आखिर में, ऐनिमेशन और ऐनिमेशन फ़्रेम के अपडेट का पता लगाना अब भी कहानी का सिर्फ़ एक हिस्सा है. ऐसा इसलिए, क्योंकि इससे सिर्फ़ ऐनिमेशन अपडेट की संख्या का पता चलता है, न कि क्वालिटी का.

उदाहरण के लिए, वीडियो देखते समय आपको 60 फ़्रेम प्रति सेकंड (एफ़पीएस) का फ़्रेमरेट दिख सकता है. तकनीकी रूप से, यह वीडियो पूरी तरह से सही है. हालांकि, ऐसा हो सकता है कि वीडियो का बिट रेट कम हो या नेटवर्क बफ़रिंग से जुड़ी समस्याएं हों. इसे सीधे तौर पर, ऐनिमेशन की स्मूदनेस की मेट्रिक से कैप्चर नहीं किया जाता. हालांकि, यह अब भी उपयोगकर्ता के लिए परेशानी पैदा कर सकता है.

इसके अलावा, ऐसा भी हो सकता है कि कोई गेम <canvas> का इस्तेमाल कर रहा हो. हो सकता है कि वह फ़्रेम रेट को स्थिर रखने के लिए, ऑफ़स्क्रीन कैनवस जैसी तकनीकों का इस्तेमाल कर रहा हो. ऐसे में, तकनीकी तौर पर गेम के ऐनिमेशन फ़्रेम पूरी तरह से स्मूद हो सकते हैं. हालांकि, ऐसा हो सकता है कि गेम की ऐसेट को सीन में लोड न किया जा सका हो या रेंडरिंग से जुड़ी गड़बड़ियां दिख रही हों.

इसके अलावा, किसी साइट पर बहुत खराब ऐनिमेशन भी हो सकते हैं 🙂

मेरा मतलब है कि मुझे लगता है कि वे अपने समय के हिसाब से बहुत अच्छे थे!

एक ऐनिमेशन फ़्रेम की स्थितियां

ऐसा हो सकता है कि फ़्रेम को आंशिक रूप से दिखाया गया हो या फ़्रेम इस तरह से ड्रॉप किए गए हों कि वीडियो की क्वालिटी पर कोई असर न पड़े. इसलिए, हमने हर फ़्रेम को एक स्कोर देना शुरू कर दिया है. यह स्कोर, फ़्रेम के पूरा होने या वीडियो के स्मूद होने के आधार पर दिया जाता है.

यहां एक ऐनिमेशन फ़्रेम की स्थिति को समझने के अलग-अलग तरीके दिए गए हैं. इन्हें सबसे अच्छे से लेकर सबसे खराब स्थिति के हिसाब से क्रम में लगाया गया है:

इन स्थितियों को स्कोर में बदला जा सकता है. इस स्कोर को समझने का एक तरीका यह है कि इसे उपयोगकर्ता को दिखने की संभावना के तौर पर देखा जाए. एक फ़्रेम के ड्रॉप होने से शायद कोई खास फ़र्क़ न पड़े. हालांकि, लगातार कई फ़्रेम के ड्रॉप होने से, वीडियो के स्मूथ चलने पर असर पड़ता है!

सभी को एक साथ रखना: फ़्रेम ड्रॉप होने का प्रतिशत मेट्रिक

कभी-कभी, हर ऐनिमेशन फ़्रेम की स्थिति के बारे में ज़्यादा जानकारी देना ज़रूरी हो सकता है. हालांकि, किसी अनुभव के लिए "एक नज़र में" स्कोर असाइन करना भी फ़ायदेमंद होता है.

ऐसा हो सकता है कि फ़्रेम पूरी तरह से रेंडर न हों. इसके अलावा, ऐसा भी हो सकता है कि पूरी तरह से स्किप किए गए फ़्रेम अपडेट से, स्मूदनेस पर असर न पड़े. इसलिए, हम सिर्फ़ फ़्रेम की गिनती करने के बजाय, इस बात पर ज़्यादा ध्यान देना चाहते हैं कि ब्राउज़र, ज़रूरत के समय विज़ुअल तौर पर पूरे अपडेट देने में कितना असमर्थ है.

मेंटल मॉडल को यहां से यहां पर ले जाना चाहिए:

1. फ़्रेम प्रति सेकंड,
2. ऐनिमेशन से जुड़े ज़रूरी अपडेट और उनके न होने का पता लगाने के लिए,
3. किसी समयावधि में छोड़े गए सेशन का प्रतिशत.

इसमें यह मायने रखता है कि अहम अपडेट के लिए, आपको कितना इंतज़ार करना पड़ा. हमें लगता है कि इससे उपयोगकर्ताओं को वेब कॉन्टेंट को आसानी से ऐक्सेस करने का अनुभव मिलेगा. अब तक, हमने मेट्रिक के शुरुआती सेट के तौर पर इनका इस्तेमाल किया है:

• औसत फ़्रेम ड्रॉप: पूरी टाइमलाइन में, बिना किसी बदलाव वाले सभी ऐनिमेशन फ़्रेम के लिए
• छोड़े गए फ़्रेम का सबसे खराब प्रतिशत: इसे एक सेकंड की स्लाइडिंग टाइम विंडो के हिसाब से मापा जाता है.
• ड्रॉप किए गए फ़्रेम के प्रतिशत का 95वां पर्सेंटाइल: इसे एक सेकंड के स्लाइडिंग टाइम विंडो के हिसाब से मेज़र किया जाता है.

आपको ये स्कोर, Chrome डेवलपर टूल में दिख सकते हैं. ये मेट्रिक सिर्फ़ फ़्रेम थ्रूपुट पर फ़ोकस करती हैं. हालांकि, हम फ़्रेम लेटेंसी जैसे अन्य फ़ैक्टर का भी आकलन कर रहे हैं.

डेवलपर टूलिंग में इसे खुद आज़माएं!

परफ़ॉर्मेंस एचयूडी

Chromium में परफ़ॉर्मेंस एचयूडी (chrome://flags/#show-performance-metrics-hud) नाम की एक सुविधा है. यह फ़्लैग के पीछे छिपी होती है. इसमें, आपको वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक जैसे कई पैरामीटर के लाइव स्कोर दिखते हैं. साथ ही, समय के साथ छोड़े गए फ़्रेम के प्रतिशत के आधार पर, ऐनिमेशन के स्मूद होने से जुड़ी कुछ एक्सपेरिमेंटल परिभाषाएं भी दिखती हैं.

फ़्रेम रेंडरिंग के आंकड़े

नए ऐनिमेशन फ़्रेम का लाइव व्यू देखने के लिए, DevTools में रेंडरिंग सेटिंग के ज़रिए "फ़्रेम रेंडरिंग के आंकड़े" चालू करें. इन फ़्रेम को अलग-अलग रंगों में कोड किया जाता है, ताकि पूरे फ़्रेम के अपडेट और कुछ हिस्सों के अपडेट के बीच अंतर किया जा सके. रिपोर्ट किया गया एफ़पीएस, सिर्फ़ पूरी तरह से रेंडर किए गए फ़्रेम के लिए होता है.

DevTools की परफ़ॉर्मेंस प्रोफ़ाइल रिकॉर्डिंग में फ़्रेम व्यूअर

DevTools के परफ़ॉर्मेंस पैनल में, फ़्रेम व्यूअर की सुविधा लंबे समय से उपलब्ध है. हालांकि, यह मॉडर्न रेंडरिंग पाइपलाइन के काम करने के तरीके से थोड़ा अलग हो गया था. हाल ही में, इसमें काफ़ी सुधार हुआ है. यहां तक कि Chrome Canary के नए वर्शन में भी सुधार हुआ है. हमें लगता है कि इससे ऐनिमेशन से जुड़ी समस्याओं को डीबग करना बहुत आसान हो जाएगा.

आज आपको पता चलेगा कि फ़्रेम व्यूअर में फ़्रेम, वीसिंक बाउंड्री के साथ बेहतर तरीके से अलाइन किए गए हैं. साथ ही, इन्हें स्टेटस के आधार पर कलर कोड किया गया है. ऊपर बताए गए सभी पहलुओं के लिए, अब भी पूरी तरह से विज़ुअलाइज़ेशन उपलब्ध नहीं है. हालांकि, हम आने वाले समय में और विज़ुअलाइज़ेशन जोड़ने का प्लान बना रहे हैं.

Chrome ट्रेसिंग

आखिर में, Chrome ट्रेसिंग की मदद से, ज़्यादा जानकारी पाई जा सकती है. इसके लिए, नए Perfetto UI (या about:tracing) का इस्तेमाल करके, "वेब कॉन्टेंट रेंडरिंग" ट्रेस रिकॉर्ड किया जा सकता है. साथ ही, Chrome के ग्राफ़िक्स पाइपलाइन के बारे में ज़्यादा जानकारी पाई जा सकती है. यह एक मुश्किल काम हो सकता है. हालांकि, इसे आसान बनाने के लिए, हाल ही में Chromium में कुछ सुविधाएं जोड़ी गई हैं. लाइफ़ ऑफ़ अ फ़्रेम दस्तावेज़ में उपलब्ध जानकारी की खास जानकारी देखी जा सकती है.

ट्रेस इवेंट की मदद से, यह तय किया जा सकता है कि:

• कौनसे ऐनिमेशन चल रहे हैं (TrackerValidation नाम वाले इवेंट का इस्तेमाल करके).
• ऐनिमेशन फ़्रेम की सटीक टाइमलाइन पाना (PipelineReporter नाम वाले इवेंट का इस्तेमाल करके).
• एनिमेशन के अपडेट में रुकावट आने की समस्या को ठीक करने के लिए, यह पता लगाएं कि आपके एनिमेशन को तेज़ी से चलने से कौनसी चीज़ रोक रही है. इसके लिए, PipelineReporter इवेंट में इवेंट ब्रेकडाउन का इस्तेमाल करें.
• इनपुट के आधार पर होने वाले ऐनिमेशन के लिए, देखें कि विज़ुअल अपडेट मिलने में कितना समय लगता है. इसके लिए, EventLatency नाम वाले इवेंट का इस्तेमाल करें.

आगे क्या करना है

वेबसाइट की परफ़ॉर्मेंस की जानकारी से जुड़ी पहल का मकसद, वेब पर लोगों को शानदार अनुभव देने के लिए मेट्रिक और दिशा-निर्देश उपलब्ध कराना है. लैब-आधारित मेट्रिक, जैसे कि टोटल ब्लॉकिंग टाइम (टीबीटी), इंटरैक्टिविटी से जुड़ी संभावित समस्याओं का पता लगाने और उनका निदान करने के लिए ज़रूरी हैं. हम ऐनिमेशन के स्मूद होने के लिए, लैब में तैयार की गई ऐसी ही मेट्रिक डिज़ाइन करने का प्लान बना रहे हैं.

हम अलग-अलग ऐनिमेशन फ़्रेम के डेटा के आधार पर, एक बेहतर मेट्रिक डिज़ाइन करने के लिए काम कर रहे हैं. इस बारे में हम आपको अपडेट देते रहेंगे.

आने वाले समय में, हम ऐसे एपीआई भी डिज़ाइन करना चाहते हैं जिनकी मदद से, फ़ील्ड और लैब में मौजूद असली उपयोगकर्ताओं के लिए, ऐनिमेशन की परफ़ॉर्मेंस को आसानी से मापा जा सके. वहां भी अपडेट पाने के लिए हमारे साथ बने रहें!

सुझाव/राय दें या शिकायत करें

हम Chrome में हाल ही में किए गए सभी सुधारों और डेवलपर टूल के बारे में उत्साहित हैं. इन टूल की मदद से, ऐनिमेशन के स्मूद होने का आकलन किया जा सकता है. कृपया इन टूल को आज़माएं, अपने ऐनिमेशन की तुलना करें, और हमें बताएं कि इससे क्या नतीजे मिलते हैं!

अपनी टिप्पणियां, web-vitals-feedback Google ग्रुप को भेजी जा सकती हैं. इसके लिए, विषय के तौर पर "[स्मूदनेस मेट्रिक]" का इस्तेमाल करें. हमें आपके सुझाव/राय का इंतज़ार रहेगा!