كيفية قياس أداء رسومات المتصفّح

في ما يلي ملخّص لقياس أداء الرسومات في المتصفّح: ارسم أكبر قدر ممكن مع الحفاظ على عدد لقطات سلس في الثانية. بعد انخفاض عدد اللقطات في الثانية، يمكنك معرفة عدد اللقطات التي يمكنك رسمها لكل إطار. نهاية المشاركة. لا؟ حسنًا، سأوضّح لك المزيد من المعلومات.

مثال على الوقت في ما يلي مقتطف رمز صغير يحتوي على دالة tick لقياس الأداء. تستدعي الدالة tick دالة draw مع زيادة في تحميل الرسم إلى أن يستغرق الرسم وقتًا أطول بشكلٍ ثابت عن 33 ملي ثانية.

var t, previousTime;
var drawLoad = 1;
var slowCount = 0;
var maxSlow = 10;
// Note, you might need to polyfill performance.now and requestAnimationFrame
t = previousTime = performance.now();
var tick = function() {
    var maximumFrameTime = 1000/30; // 30 FPS
    t = performance.now();
    var elapsed = t - previousTime;
    previousTime = t;
    if (elapsed < maximumFrameTime || slowCount < maxSlow) {
        if (elapsed < maximumFrameTime) {
            drawLoad+=10;
        } else {
            slowCount++;
        }
        draw(drawLoad);
        requestAnimationFrame(tick);
    } else {
        // found maximum sustainable load at 30 FPS
        document.getElementById('res').innerHTML = ("could draw "+(drawLoad)+" in " +
            maximumFrameTime + " ms");
    }
};
requestAnimationFrame(tick);

​ يمكنك الاطّلاع على المثال المباشر على jsFiddle.

يمكنك الاطّلاع على كيفية استمرار الأداء في التحسين إلى أن يصل إلى النقطة التي يتباطأ فيها. هذه طريقة رائعة وبسيطة لمعرفة عدد اللقطات التي يمكنك رسمها بمعدّل عرض سلس للصور. يمكنك أيضًا إدراج دالة الرسم الخاصة بك في المثال وإجراء بعض عمليات القياس المخصّصة.

التحذيرات والصعوبات الشائعة عند قياس أداء رسومات المتصفّح

إذا كان المثال أعلاه هو الطريقة المناسبة لإجراء ذلك، ما هي الطرق غير المناسبة؟ الطرق التي تؤدي إلى قياس أداء أشياء غير ذات صلة أو التي تمنحك مقاييس أداء غريبة لا يبدو أنّ لها أي علاقة بسرعة تشغيل تطبيقك يسرّنا الإجابة عن سؤالك. في ما يلي الخطأان الأكثر شيوعًا اللذان رأيناهما على الويب.

قياس الحد الأقصى لعدد اللقطات في الثانية: ارسم جزءًا صغيرًا من كل لقطة وقياس عدد اللقطات في الثانية. لا يعمل هذا الإجراء بشكل جيد لقياس أداء الرسومات على Chrome لأنّ تنفيذ الرسومات الأساسية يكون متزامنًا مع معدل تحديث الشاشة (لذا يمكنك الحصول على 60 تحديثًا للشاشة بحد أقصى في الثانية). ولن يكون قياس سرعة طلب الرسم مفيدًا أيضًا لأنّ نظام الرسم في Chrome يضع أوامر الرسم في ذاكرة تخزين مؤقت للأوامر يتم تنفيذها عند تحديث الشاشة التالي.

إنّ استخدام setTimeout لقياس أداء الرسومات هو فكرة سيئة أخرى. يتم ضبط الحد الأقصى لفاصل setTimeout على 4 ملي ثانية في المتصفّحات، لذا فإنّ الحد الأقصى الذي يمكنك الحصول عليه هو 250 لقطة في الثانية. في السابق، كان للمتصفحات فواصل زمنية مختلفة، لذا قد يكون لديك معيار رسم بسيط جدًا وخاطئ يُظهر المتصفح "أ" يعمل بمعدّل 250 لقطة في الثانية (فاصل زمني أدنى 4 مللي ثانية) والمتصفح "ب" يعمل بمعدّل 100 لقطة في الثانية (فاصل زمني أدنى 10 مللي ثانية). من الواضح أنّ "أ" أسرع. لا من المحتمل أنّه تم تنفيذ رمز الرسم في العنصر B بشكل أسرع من العنصر A، على سبيل المثال، استغرق العنصر A 3 ملي ثانية واستغرق العنصر B ملي ثانية واحدة. لا يؤثر ذلك في عدد اللقطات في الثانية، لأنّ وقت الرسم أقل من الحد الأدنى لفاصل setTimeout. وإذا كان المتصفّح يعرض المحتوى بشكل غير متزامن، لا يمكنك الاعتماد على أيّ توقعات. لا تستخدِم setTimeout ما لم تكن متأكدًا من خطواتك.

كيفية إجراء ذلك

هناك طريقة أفضل لقياس الأداء وهي استخدام رسومات واقعية ومضاعفتها إلى أن يبدأ معدل عرض اللقطات في الانخفاض. على سبيل المثال، إذا كنت تكتب لعبة من الأعلى إلى الأسفل باستخدام تضاريس خريطة وحدات، جرِّب رسم خريطة الوحدات في كل لقطة ومعرفة ما إذا كانت تعمل بمعدّل 60 لقطة في الثانية. إذا كانت الإجابة "نعم"، يمكنك زيادة التحميل (رسم خريطة القطع مرتين في كل إطار، مع محو المحتوى بينها). واصِل زيادة القيمة إلى أن ينخفض عدد اللقطات في الثانية إلى مستوى ثابت جديد. الآن أنت تعرف عدد الطبقات من خريطة المربّعات التي يمكنك رسمها لكل إطار.

تختلف احتياجات تطبيقات الرسومات المختلفة، لذا يجب وضع ذلك في الاعتبار عند كتابة مقاييس الأداء. يمكنك قياس ميزات الرسومات التي تستخدمها في تطبيقك. عند العثور على سيناريو بطيء، حاوِل تقليله إلى أصغر قطعة من الرمز البرمجي التي تؤدي إلى تكراره (وأرسِل تقرير خطأ على new.crbug.com إذا كان من المفترض أن يكون أسرع).

للتعرّف على كيفية كتابة رمز رسومات الويب العالية الأداء، يمكنك الاطّلاع على محادثة Google I/O 2012 التي قدّمها "نات دوكا" و"توم ويلتزيوس" من فريق وحدة معالجة الرسومات في Chrome.