تعرَّف على كيفية قياس الصور المتحركة، وكيفية التفكير في إطارات الصور المتحركة، وتجانس الصفحة بشكل عام.
ربما تكون قد واجهت صفحات "تتعثر" أو "تجميد" أثناء التمرير أو والرسوم المتحركة. ويمكننا القول بأنّ هذه التجارب ليست سلسة. إلى العنوان من هذه الأنواع من المشكلات، كان فريق Chrome يعمل على إضافة المزيد من إلى الأدوات المختبرية لاكتشاف الرسوم المتحركة، بالإضافة إلى إجراء تحسينات ثابتة بيانات تشخيص مسار العرض في Chromium
نود أن نشارك معك بعض التقدم الذي أحرزته مؤخرًا، وأن نقدم إرشادات ملموسة بشأن استخدام الأدوات، لمناقشة أفكار لمقاييس سلاسة الرسوم المتحركة المستقبلية. كالعادة، نسعد والاستماع إلى ملاحظاتك.
سيتناول هذا المنشور ثلاثة مواضيع رئيسية:
- نظرة سريعة على الصور المتحركة وإطارات الصور المتحركة.
- أفكارنا الحالية حول قياس سلاسة الصور المتحركة بشكل عام.
- إليك بعض الاقتراحات العملية التي يمكنك الاستفادة منها اليوم في الأدوات الاختبارية.
ما هي الرسوم المتحركة؟
الرسوم المتحركة تضفي الحيوية على المحتوى! من خلال تحريك المحتوى، خاصةً عند الاستجابة إلى تفاعلات المستخدم، يمكن أن تجعل الرسوم المتحركة التجربة تبدو طبيعية أكثر، ومفهوم وممتع.
لكن يمكن للصور المتحركة التي يتم تنفيذها بشكل سيئ، أو مجرد إضافة عدد كبير جدًا من الرسوم المتحركة، ويجعل التجربة غير ممتعة على الإطلاق. من المحتمل أننا جميعًا تفاعلت مع واجهة أضافت للتو الكثير من "المفيدة" انتقال المؤثّرة، التي تصبح في الواقع عدوانية تجاه التجربة عندما يكون أداؤها ضعيفًا. لذلك قد يعرف بعض المستخدمين تفضيل الحركة المخفّضة، وهو تفضيل للمستخدم يجب أن تحترمها.
كيف تعمل الصور المتحركة؟
وباختصار، يمكن مراجعة مسار العرض تتكون من عدة مراحل متسلسلة:
- النمط: احسب والأنماط التي تنطبق على العناصر.
- التنسيق: إنشاء الهندسة وموضع كل عنصر.
- الطلاء: املأ وحدات البكسل لكل عنصر إلى طبقات.
- مركّب: ارسم طبقات على الشاشة.
في حين أن هناك العديد من الطرق لتعريف الرسوم المتحركة، إلا أنها تعمل جميعًا بشكل أساسي من خلال واحد مما يلي:
- ضبط التنسيق المواقع.
- جارٍ ضبط الطلاء المواقع.
- ضبط المركّب المواقع.
نظرًا لأن هذه المراحل متسلسلة، فمن المهم تحديد الرسوم المتحركة في الخاصة بالخصائص التي تظهر بعد ذلك. كلما كان التحديث مبكرًا في العملية، كلما زادت التكاليف، ومن غير المرجح بسلاسة. (راجع العرض الأداء للحصول على مزيد من التفاصيل).
في حين أنه قد يكون من السهل تحريك خصائص التخطيط، إلا أن هناك تكاليف حتى لو لم تكن هذه التكاليف واضحة على الفور. يجب أن تكون الرسوم المتحركة من حيث تغييرات الخصائص المركّبة كلما أمكن ذلك.
تحديد الرسوم المتحركة في CSS الوصفية أو استخدام الويب Animations، مع ضمان تحريك صورك المواقع، خطوة أولى رائعة لضمان الحصول على رسوم متحركة سلسة وفعالة. لكن مع ذلك، وهذا وحده لا يضمن السلاسة لأنه حتى الرسوم المتحركة الفعالة على الويب تفرض حدودًا للأداء. لهذا السبب من المهم دائمًا القياس!
ما هي إطارات الصور المتحركة؟
يستغرق ظهور التعديلات على التمثيل المرئي للصفحة بعض الوقت. مرئي التغيير إلى إطار جديد للرسم المتحرك، والذي يتم عرضه في النهاية على العرض للمستخدم.
يتم تعديل العرض حسب فترات محدّدة، وبالتالي يتم تجميع التحديثات المرئية. شاشات متعدّدة يتم تحديثها خلال فاصل زمني ثابت، مثل 60 مرة في الثانية (وهذا يعني 60 هرتز). ويمكن أن توفر بعض الشاشات الحديثة معدلات إعادة تحميل أعلى (90-120 هرتز أصبحت شائعة). غالبًا ما يمكن لهذه الشاشات تكييف بين معدلات التحديث حسب الحاجة، أو حتى تقديم معدلات عرض إطارات متغيرة تمامًا.
إن الهدف من أي تطبيق، مثل لعبة أو متصفح، هو معالجة كل هذه تحديثات مرئية مجمّعة وإنتاج إطار رسوم متحركة مكتمل بصريًا داخل الموعد النهائي، في كل مرة. لاحظ أن هذا الهدف يختلف تمامًا عن أهداف المهام المهمة في المتصفح مثل تحميل محتوى من الشبكة بسرعة أو تنفيذ مهام JavaScript بكفاءة.
في مرحلة ما، قد يكون من الصعب جدًا إكمال جميع التحديثات المرئية داخل الموعد النهائي المخصص الذي تحدده الشاشة. وعندما يحدث هذا، يتصفح إسقاط إطار. لن يتم إغلاق شاشتك، بل يتم تكرارها فقط. سترى نفس التحديث المرئي لمدة أطول قليلاً - نفس إطار الرسوم المتحركة الذي تم تقديمه في فرصة الإطار السابق.
هذا يحدث كثيرًا في الواقع! ليس من الضروري إدراكه، خاصةً للمحتوى الثابت أو الشبيه بالمستند، وهو أمر شائع على نظام الويب في على وجه الخصوص. لا تصبح الإطارات المسقطة واضحة إلا عندما تكون هناك عناصر مرئية مهمة التحديثات، مثل الرسوم المتحركة، التي نحتاج إلى تدفق ثابت من الرسوم المتحركة لها التحديثات لإظهار حركة سلسة.
ما الذي يؤثر في إطارات الصور المتحركة؟
يمكن لمطوّري الويب أن يؤثروا بشكل كبير في قدرة المتصفح على الانتقال إلى عرض وتقديم تحديثات مرئية بكفاءة!
إليك بعض الأمثلة:
- استخدام محتوى كبير جدًا أو مستهلك للموارد ويتعذّر فك ترميزه بسرعة على الجهاز المستهدف.
- استخدام الكثير جدًا من البيانات الطبقات تتطلب مساحة كبيرة من ذاكرة وحدة معالجة الرسومات.
- تحديد أنماط CSS أو صور متحركة على الويب معقدة للغاية.
- استخدام أنماط مضادة للتصميم لإيقاف تحسينات العرض السريع.
- استخدام JavaScript كبير جدًا في سلسلة التعليمات الرئيسية، ما يؤدي إلى تنفيذ مهام طويلة تحظر المحتوى المرئي التحديثات.
ولكن كيف يمكنك معرفة متى تأخر إطار الرسوم المتحركة عن موعده النهائي وتسبب في إسقاط إطار؟
تتمثل إحدى الطرق الممكنة في استخدام
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()من القدرة على جدولة الأجزاء غير النشطة لفترة طويلة عند استخدامها بشكل متواصل (أي حظر تلك التي يتجاوز إطارًا واحدًا). - وبالمثل، يؤدي عدم وجود مجموعات كبيرة غير نشطة لفترة طويلة إلى منع المتصفّح من جدولة المهام طويلة الأمد (مثل جمع البيانات غير المرغوب فيها الأطول والخلفيات أو عمل تأملي).
- في حال تفعيل الاستطلاع وإيقافه، ستفقد الحالات التي تكون فيها ميزانية الإطار تم تجاوزه.
- ستُبلِغ استطلاعات الرأي عن حالات إيجابية كاذبة في الحالات التي يستخدم فيها المتصفّح. معدّل تعديل المتغيّر (على سبيل المثال، بسبب حالة التشغيل أو مستوى الرؤية).
- والأهم من ذلك، أنّها لا تلتقط كل أنواع الصور المتحركة التحديثات!
وقد يؤثر بذل الكثير من الجهد على سلسلة التعليمات الرئيسية في إمكانية رؤية إطارات الصور المتحركة. اطلع على Jank عينة لمعرفة كيف يمكن الرسوم المتحركة التي تعتمد على rAF، إذا كان هناك الكثير من العمل على سلسلة التعليمات الرئيسية (مثل ، إلى تجاهل الإطارات مع تقليل استدعاءات rAF، وخفض عدد اللقطات في الثانية.
عندما تتعثر سلسلة التعليمات الرئيسية، تبدأ التحديثات المرئية بالتعثر. هذا سيئ.
ركزت العديد من أدوات القياس بشكل كبير على قدرة النموذج لكي يتم تقديمها في الوقت المناسب، ولتشغيل إطارات الصور المتحركة بسلاسة. ولكن هذه ليست القصة الكاملة! راجع المثال التالي:
يعرض الفيديو أعلاه صفحة تُدخِل بشكل دوري مهامًا طويلة في
. تدمر هذه المهام الطويلة تمامًا قدرة الصفحة على تقديم
أنواعًا معينة من التحديثات المرئية، ويمكنك أن ترى في الزاوية العلوية اليمنى
انخفاض مقابل بنسبة requestAnimationFrame() تم تسجيل معدّل لقطات في الثانية عند 0.
ومع ذلك، على الرغم من هذه المهام الطويلة، تستمر الصفحة في الانتقال بسلاسة. هذا النمط هو أنه في المتصفحات الحديثة، غالبًا ما يكون التمرير تتضمّن سلاسل محادثات، مدفوعًا بالكامل بواسطة المكون.
هذا مثال يحتوي في الوقت نفسه على العديد من الإطارات المسقطة في واجهة ، إلا أنه لا يزال هناك العديد من إطارات التمرير التي تم تسليمها بنجاح على أداة إنشاء الرسائل. بمجرد اكتمال المهمة الطويلة، يتم تحديث سرعة عرض سلسلة التعليمات الرئيسية ليس له أي تغيير مرئي لتقديمه على أي حال. أشار استطلاع رأي rAF إلى انخفاض الإطار إلى 0، ولكن من الناحية المرئية، لن يتمكّن المستخدم من ملاحظة أيّ اختلاف.
بالنسبة إلى إطارات الرسوم المتحركة، القصة ليست بهذه البساطة.
إطارات الصور المتحركة: التحديثات المهمة
يوضح المثال أعلاه أن هناك ما هو أكثر من مجرد
requestAnimationFrame()
متى تكون تحديثات الرسوم المتحركة وإطارات الرسوم المتحركة مهمة؟ إليك بعض المعايير التي نأخذها في الاعتبار ونودّ الحصول على ملاحظات بشأنها:
- تحديثات سلسلة التعليمات الرئيسية وأداة المكوّن
- تعديلات سرعة عرض محتوى الصفحة
- جارٍ رصد الصور المتحركة
- الجودة مقابل الكمية
تحديثات سلسلة التعليمات الرئيسية وأداة المكوّن
تعديلات إطار الصور المتحركة غير منطقية. لا يتعلق الأمر بأن الإطارات إسقاطها بالكامل أو تقديمها بالكامل. هناك العديد من الأسباب التي قد تجعل الصورة المتحركة يمكن أن يتم عرض الإطار جزئيًا . بعبارة أخرى، يمكن أن يكون لها في وقت واحد بعض المحتوى القديم مع إضافة بعض التحديثات المرئية الجديدة وهي المقدمة.
والمثال الأكثر شيوعًا على ذلك هو عندما يتعذر على المتصفح إنشاء نسخة تحديث سلسلة التعليمات الرئيسية ضمن الموعد النهائي للإطار ولكن يتضمّن سلسلة تعليمات جديدة تحديث (مثل مثال التمرير المتسلسل من قبل).
أحد الأسباب المهمة وراء استخدام صور متحركة توضيحية لإنشاء تأثيرات متحركة الخصائص هو أن القيام بذلك يؤدي إلى تمكين تشغيل الرسوم المتحركة بالكامل بواسطة سلسلة تعليمات أداة التركيب، حتى إذا كانت سلسلة التعليمات الرئيسية مشغولة. هذه الأنواع من الرسوم المتحركة أن تستمر في إنتاج تحديثات مرئية بكفاءة موازٍ.
من ناحية أخرى، قد تكون هناك حالات يصبح فيها تحديث سلسلة التعليمات الرئيسية أخيرًا متاحة للعرض، ولكن فقط بعد تفويت العديد من المواعيد النهائية للإطارات. هنا حصول المتصفّح على بعض التحديث الجديد، ولكنه قد لا يكون التحديث الأخير.
بصفة عامة، نأخذ في الاعتبار الإطارات التي تحتوي على بعض التحديثات المرئية الجديدة، بدون كل التحديثات المرئية الجديدة، كإطار جزئي. الإطارات الجزئية ملائمة إلى حد ما الشائعة. ومن الناحية المثالية، قد تشتمل التحديثات الجزئية على الأقل على العناصر الأكثر أهمية التحديثات المرئية، مثل الرسوم المتحركة، ولكن لا يمكن أن يحدث إلا إذا كانت الرسوم المتحركة الذي تعتمده سلسلة أداة الإنشاء.
تعديلات سرعة عرض محتوى الصفحة
هناك نوع آخر من التحديث الجزئي، وهو عندما لا تكون الوسائط مثل الصور قد انتهت. فك الترميز والتقسيم إلى صور نقطية في الوقت المناسب لعرض الإطار.
وحتى إذا كانت الصفحة ثابتة تمامًا، قد لا تزال المتصفحات تتخلل العرض التحديثات المرئية أثناء التمرير السريع. هذا لأن عمليات عرض البكسل قد يتم تجاهل أي محتوى يتخطى إطار العرض المرئي لحفظ ذاكرة وحدة معالجة الرسومات. أُنشأها جون هنتر، الذي كان متخصصًا يستغرق عرض وحدات البكسل بعض الوقت، وقد يستغرق وقتًا أطول من إطار واحد لعرض كل شيء بعد تمرير كبير، مثل التمرير بالإصبع. يحدث هذا بشكل شائع المعروف باسم لوحة المعلومات
ومع كل فرصة لعرض الإطارات، يمكن تتبع مقدار آخر التحديثات المرئية على الشاشة. قياس القدرة على القيام بذلك عبر العديد من اللقطات (أو الوقت) بشكلٍ عام باسم سرعة معالجة الإطارات.
إذا كانت وحدة GPU متوقفة فعلاً، فقد يبدأ المتصفح (أو النظام الأساسي) في تقييد معدّل محاولات التعديلات المرئية، ما يؤدّي بدوره إلى تقليل عدد اللقطات في الثانية الفعالة. وفي حين أن ذلك من الناحية الفنية يمكن أن يقلل من عدد تحديثات الإطار، سيظل مرئيًا كسرعة معالجة بيانات للإطار السفلي.
ومع ذلك، ليست كل أنواع سرعة معالجة بيانات اللقطات المنخفضة ضارة. إذا كانت الصفحة غير نشِطة عادةً ولا توجد رسوم متحركة نشطة، ويكون عدد اللقطات في الثانية المنخفض جذابة كمعدل مرتفع للقطات في الثانية (ويمكنها أيضًا توفير شحن البطارية).
إذًا، متى يكون لسرعة نقل بيانات الإطارات؟
جارٍ رصد الصور المتحركة
هناك أهمية كبيرة لسرعة معالجة الإطارات، خاصةً خلال الفترات التي تنطوي على والرسوم المتحركة. ستعتمد أنواع الرسوم المتحركة المختلفة على التحديثات المرئية من موضوع معين (رئيسي أو المكون أو العامل)، بحيث يكون التحديث المرئي الخاص به يعتمد على سلسلة التعليمات تلك التي تُقدّم التعديل خلال الموعد النهائي. نقول إن تؤثر سلسلة التعليمات المحددة في السلاسة متى توفّرت صورة متحركة نشطة تعتمد على تحديث سلسلة المحادثات هذا.
يكون تعريف ورصد بعض أنواع الصور المتحركة أسهل من غيرها. تكون الرسوم المتحركة الوصفية أو الرسوم المتحركة التي يعتمد عليها المستخدم أكثر وضوحًا من الرسوم المتحركة المستندة إلى JavaScript والتي تمّ تنفيذها كتحديثات دورية للأجهزة المتحركة وخصائص النمط.
حتى مع requestAnimationFrame() أنت
أن كل استدعاء rAF يؤدي بالضرورة إلى إنشاء عرض
تحديث أو رسم متحرك. على سبيل المثال، قد يتم استخدام الاستطلاع rAF لتتبُّع عدد اللقطات في الثانية فقط.
(كما هو موضح أعلاه) يجب ألا يؤثر في قياسات السلاسة نظرًا لوجود
لا تحديث مرئي.
الجودة مقابل الكمية
أخيرًا، لا يزال اكتشاف الرسوم المتحركة وتحديثات إطار الرسوم المتحركة جزءًا فقط من القصة لأنها لا تلتقط سوى كمية تحديثات الرسوم المتحركة، وليس الشطيرة.
على سبيل المثال، قد تشاهد عددًا ثابتًا من اللقطات يبلغ 60 إطارًا في الثانية أثناء مشاهدة الفيديو القادم. من الناحية الفنية، هذا سلس تمامًا، لكن الفيديو نفسه قد يحتوي على أو انخفاض معدل نقل البيانات أو مشكلات في التخزين المؤقت للشبكة. لم يتم التقاط هذا بواسطة مقاييس انسيابية الرسوم المتحركة بشكل مباشر، إلا أنها ربما لا تزال تتعارض مع المستخدم.
أو إحدى الألعاب التي تستفيد من <canvas> (ربما حتى باستخدام أساليب مثل
خارج الشاشة
لوحة الرسم إلى
معدل عرض إطارات ثابت) قد يكون سلسًا من الناحية الفنية من حيث
هي إطارات الصور المتحركة، وكل ذلك مع عدم تحميل أصول ألعاب عالية الجودة في
المشهد أو عرض أدوات العرض.
وبالطبع، يمكن أن يتضمّن الموقع بعض الرسوم المتحركة السيئة جدًا 🙂
أعني، أعتقد أنهم كانوا رائعين جدًا في وقتهم!
حالات إطار رسم متحرك واحد
لأنّه قد يتم عرض اللقطات جزئيًا، أو قد تحدث اللقطات التي تم إغفالها بطرق لا تؤثر في التجانس، فقد بدأنا في اعتبار كل إطار يحتوي على في درجة الاكتمال أو التجانس.
فيما يلي مجموعة متنوعة من الطرق التي نفسر بها حالة دولة واحدة إطار الصورة المتحركة، مرتبة من الأفضل إلى الأسوأ:
| ما مِن تحديث مطلوب | وقت الخمول، كرر للإطار السابق. |
| عرض كامل | تم تعديل سلسلة المحادثات الرئيسية إمّا خلال المهلة المحددة أو لم يتم تطبيقها. أن يكون تحديث سلسلة التعليمات الرئيسية مطلوبًا. |
| معروض جزئيًا | المكوّنات فقط: إلا أنّ تحديث السلسلة الرئيسية المتأخر لا يظهر فيه التغيير. |
| معروض جزئيًا | المكوّنات فقط: تحتوي سلسلة التعليمات الرئيسية على تحديث مرئي، لكن ذلك لم يتضمن تحديثًا متحركًا يؤثر في السلاسة. |
| معروض جزئيًا | المكوّنات فقط: اشتملت سلسلة التعليمات الرئيسية على تحديث مرئي يؤثر ولكن تم استخدامه بدلاً من ذلك، إلا أنّ إطارًا قديمًا كان قديمًا. |
| معروض جزئيًا | المكوّنات فقط: بدون التحديث الرئيسي المطلوب، يحتوي تحديث المركب على رسم متحرك يؤثر في السلاسة. |
| معروض جزئيًا | المكون فقط، ولكن لا يحتوي تحديث المركب على الرسوم المتحركة التي تؤثر في السلاسة. |
| الإطار الذي تم إسقاطه | ما مِن تحديث. لم يكن هناك أي تحديث مطلوب للمكون، وكان الرئيسي متأخرًا. |
| الإطار الذي تم إسقاطه | تم طلب تحديث أداة التركيب، ولكن تم تأخيره. |
| الإطار القديم | كان التحديث مطلوبًا، حيث تم إنشاؤه بواسطة العارض، لكن ما زالت وحدة معالجة الرسومات لا تقدِّمها قبل الموعد النهائي لمزامنة vsync. |
ومن الممكن تحويل هذه الحالات إلى درجة إلى حد ما. وربما إحدى الطرق تفسير هذه الدرجة من خلال اعتبارها احتمالية يمكن رصدها من خلال المستخدم. وقد لا يكون أي إطار مفرد يمكن ملاحظته بالقدر الكافي، ولكن هناك سلسلة من فالعديد من الإطارات المسقطة تؤثر في انسيابية مستمرة!
جمع كل شيء معًا: مقياس النسبة المئوية للإطارات التي تم إسقاطها
في حين أنه قد يكون من الضروري أحيانًا التعمق في حالة كل إطار الرسوم المتحركة، فمن المفيد أيضًا تعيين لقطة "نظرة سريعة" نقاط وتجربة.
لأنّ اللقطات قد يتم عرضها جزئيًا ولأنّه حتى يتم تخطّيها بالكامل قد لا تؤثر تحديثات الإطار في الانسيابية، فنحن نرغب في التركيز بشكل أقل على فقط عد اللقطات والمزيد على مدى عدم قدرة المتصفح على توفير تحديثات كاملة مرئيًا في الوقت المناسب.
يجب أن ينتقل النموذج العقلي من:
- اللقطات في الثانية، إلى
- اكتشاف تحديثات الرسوم المتحركة المفقودة والمهمة،
- النسبة المئوية للانخفاض خلال فترة زمنية معيّنة.
الأمر المهم هو: نسبة الوقت التي تنتظر التحديثات. ونعتقد أن هذا يتوافق مع الطريقة الطبيعية التي يختبر بها المستخدمون السلاسة لمحتوى الويب عمليًا. حتى الآن، نستخدم ما يلي المجموعة الأولية من المقاييس:
- متوسط النسبة المئوية التي تم تجاهلها: لجميع إطارات الصور المتحركة غير النشطة خلال المخطط الزمني بالكامل
- أسوأ حالة لانخفاض النسبة المئوية للإطارات: عند القياس على مدار ثانية واحدة نوافذ زمنية.
- الشريحة المئوية الخامسة والتسعين للّقطات التي تم إسقاطها: وفقًا لما تم قياسه خلال ثانية واحدة تمريرات الوقت.
يمكنك الاطّلاع على هذه النتائج في بعض أدوات مطوّري برامج Chrome اليوم. في حين أن هذه فقط على إجمالي سرعة معالجة الإطار، إلا أننا نقيّم أيضًا مثل وقت استجابة الإطار.
جرِّبها بنفسك في أدوات المطوّرين.
HUD للالأداء
يحتوي Chromium على HUD أنيقة مخفية خلف علامة
(chrome://flags/#show-performance-metrics-hud). يمكنك العثور فيه على
نتائج لبعض العوامل مثل "مؤشرات أداء الويب الأساسية" وبعض التعريفات التجريبية
للحصول على سلاسة الصور المتحركة استنادًا إلى النسبة المئوية للإطارات التي تم إسقاطها بمرور الوقت.
إحصاءات عرض الإطارات
تفعيل "عرض الإطارات" الإحصاءات" في "أدوات مطوري البرامج" من خلال إعدادات "العرض" للاطّلاع على عرض مباشر لإطارات الصور المتحركة الجديدة التي تكون مصنَّفة حسب اللون للتفريق بين التحديثات الجزئية والإطار الذي تم إفلاته بالكامل التحديثات. عدد اللقطات في الثانية الذي تم الإبلاغ عنه هو فقط للّقطات المعروضة بالكامل.
ميزة "عارض الإطارات" في تسجيلات الملف الشخصي للأداء في "أدوات مطوّري البرامج"
أداء أدوات مطوري البرامج اللوحة لها إطارات المُشاهد ومع ذلك، تطوّرت بشكل غير متزامن مع طريقة عمل مسار العرض الحديث أن يعمل بالفعل. كان هناك الكثير من التحسينات مؤخرًا، حتى في أحدث Chrome Canary الذي نعتقد أنّه سيسهّل بشكل كبير تصحيح أخطاء الصور المتحركة.
ستكتشف اليوم أنّ الإطارات في عارض الإطارات تتماشى بشكل أفضل مع هذه الإطارات. وحدود vsync وترميز اللون حسب الحالة. لا تزال هناك منطقة غير كاملة جميع الفروق الدقيقة الموضحة أعلاه، ولكننا نخطط لإضافة المزيد في المستقبل القريب.
تتبُّع Chrome
وأخيرًا، باستخدام تتبع Chrome،
الأداة المفضلة للتعمق في التفاصيل،
يمكنك تسجيل "عرض محتوى الويب" تتبُّع الأداء من خلال Perfetto الجديد
واجهة المستخدم (أو about:tracing)، والاطّلاع على مزيد من المعلومات في
الرسوميات. يمكن أن تكون مهمة شاقة، ولكن هناك بعض الأشياء
تمت إضافتها مؤخرًا إلى Chromium لتسهيل استخدامها. يمكنك الحصول على نظرة عامة حول
متاح في قائمة
إطار
جلسة المراجعة.
من خلال أحداث التتبُّع، يمكنك تحديد ما يلي بشكل دقيق:
- الصور المتحركة التي يتم تشغيلها (باستخدام الأحداث المُسمّاة "
TrackerValidation") - الحصول على المخطط الزمني الدقيق لإطارات الصور المتحركة (باستخدام الأحداث المُعنونة
PipelineReporter). - للحصول على تحديثات الرسوم المتحركة السيئة، اكتشف بالضبط ما الذي يمنع
رسوم متحركة تعمل بشكل أسرع (باستخدام تصنيفات الأحداث داخل
حدثان (
PipelineReporter)). - بالنسبة إلى الصور المتحركة المستندة إلى المدخلات، تعرّف على المدة التي يستغرقها الحصول على تعديل مرئي
(باستخدام أحداث باسم "
EventLatency")
الخطوات التالية
تهدف مبادرة مؤشرات أداء الويب إلى توفير مقاييس وإرشادات حول إنشاء تجارب مستخدم رائعة على الويب. مقاييس قائمة على المختبر مثل Total وقت الحظر (TBT) أمر حيوي تحديد وتشخيص مشكلات التفاعل المحتملة. ونحن نخطط للقيام بتصميم مقياس مختبري مشابه لسلاسة الصور المتحركة.
سنبقيك على اطلاع دائم بينما نواصل العمل على أفكار لتصميم شامل يستند إلى بيانات إطار الرسوم المتحركة الفردية.
وفي المستقبل، نرغب أيضًا في تصميم واجهات برمجة تطبيقات تتيح قياس سلاسة الصور المتحركة بشكل جيد للمستخدمين الحقيقيين في الحقل وكذلك في التمرين المعملي. ننصحك بمتابعتنا لمعرفة آخر الأخبار هناك أيضًا.
ملاحظات
ونحن متحمسون للتعرّف على كل التحسينات الأخيرة وأدوات المطوّرين التي أتاحت في Chrome لقياس سلاسة الصور المتحركة. يرجى تجربة هذه الأدوات، قياس أداء الرسوم المتحركة، وإعلامنا أين تؤدي!
يمكنك إرسال تعليقاتك إلى web-vitals-feedback Google مجموعة باستخدام "[Smoothness Metrics]" في سطر الموضوع. نحن نبحث حقًا أتوق إلى سماع ما تفكر فيه!