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

ऐनिमेशन का आकलन करने, ऐनिमेशन फ़्रेम के बारे में सोचें, और पूरे पेज को एक जैसा बनाए रखने के बारे में जानें.

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

हम हाल की प्रोग्रेस के बारे में बताना चाहते हैं, बेहतर टूलिंग के बारे में सलाह देना चाहते हैं, और जिसमें भविष्य के ऐनिमेशन स्मूदनेस मेट्रिक के बारे में चर्चा की गई हो. हमेशा की तरह, हमें सुझाव/राय दें या शिकायत करें.

इस पोस्ट में तीन मुख्य विषय शामिल होंगे:

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

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

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

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

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

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

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

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

• लेआउट अडजस्ट किया जा रहा है प्रॉपर्टी.
• पेंट को अडजस्ट करना प्रॉपर्टी.
• कंपोज़िट को अडजस्ट किया जा रहा है प्रॉपर्टी.

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

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

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

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

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

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

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

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

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

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

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

कुछ उदाहरण:

• ऐसे कॉन्टेंट का इस्तेमाल करना जो बहुत बड़ा हो या जिसे कॉन्टेंट की मदद से डिकोड नहीं किया जा सकता हो टारगेट डिवाइस.
• कई सुविधाओं का इस्तेमाल किया जा रहा है लेयर बहुत ज़्यादा जीपीयू मेमोरी की ज़रूरत है.
• बहुत ज़्यादा जटिल सीएसएस स्टाइल या वेब ऐनिमेशन तय करना.
• डिज़ाइन एंटी-पैटर्न का इस्तेमाल करना, जो तेज़ रेंडरिंग ऑप्टिमाइज़ेशन को बंद कर देते हैं.
• मुख्य थ्रेड पर बहुत ज़्यादा 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() पोलिंग का इस्तेमाल करना अच्छा नहीं होता है:

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

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

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

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

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

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

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

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

ऐनिमेशन फ़्रेम: वे अपडेट जो ज़रूरी हैं

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

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

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

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

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

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

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

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

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

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

एक अन्य तरह का आंशिक अपडेट तब होता है, जब इमेज जैसा मीडिया पूरा न हुआ हो डिकोडिंग और रास्टराइज़ करना.

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

हर फ़्रेम रेंडर होने के अवसर से, यह ट्रैक किया जा सकता है कि नए विज़ुअल अपडेट, असल में स्क्रीन पर दिखते हैं. डेटा इकट्ठा करने की क्षमता को मापना से ज़्यादा फ़्रेम (या समय) को फ़्रेम थ्रूपुट कहा जाता है.

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

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

फ़्रेम थ्रूपुट कब मायने रखता है?

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

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

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

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

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

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

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

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

इतना ही नहीं, किसी साइट पर बहुत खराब ऐनिमेशन भी मौजूद हो सकते हैं 🙂

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

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

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

यहाँ पर उन तरीक़ों का स्पेक्ट्रम दिया गया है जिनसे हम किसी सिंगल स्थिति की व्याख्या करते हैं ऐनिमेशन फ़्रेम, सबसे अच्छे से सबसे ख़राब मामले के क्रम में दिया गया है:

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

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

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

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

मानसिक मॉडल को इन चीज़ों से आगे बढ़ना चाहिए:

1. फ़्रेम प्रति सेकंड, से
2. गै़र-ज़रूरी और ज़रूरी ऐनिमेशन अपडेट का पता लगाने के लिए,
3. किसी दी गई समयावधि में प्रतिशत में कमी.

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

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

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

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

परफ़ॉर्मेंस HUD

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

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

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

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

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

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

Chrome ट्रेसिंग

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

ट्रेस इवेंट के ज़रिए, इनकी पहचान की जा सकती है:

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

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

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

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

आने वाले समय में, हम ऐसे एपीआई भी डिज़ाइन करना चाहते हैं जिनकी मदद से यह ऐनिमेशन, field के साथ-साथ लैब में भी देखे जा सकते हैं. यहां भी अपडेट पाने के लिए हमारे साथ बने रहें!

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

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

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