قم بإنشاء مشهد توتر متكرر
أنشئ حالة اختبار بعدد معروف من الكائنات المتحركة والتأثيرات المتداخلة والتسميات النصية. قم بالتقاط تسجيل أو بذرة ثابتة بحيث يقدم كل تشغيل نفس العمل تقريبًا. قارن الخط الأساسي للمشهد الفارغ بالمشهد المزدحم، ثم افحص ما إذا كان الوقت قد تم قضاؤه في تحديثات JavaScript، أو رسم اللوحة القماشية، أو فك تشفير الصورة، أو أعمال النمط والتخطيط.
إذا كان الرسم هو مصدر التكلفة الأكبر، فاختبر تجميع المسارات المتشابهة أو تقليل تغييرات الحالة غير الضرورية أو رسم المناطق التي تغيرت فقط. وإذا كان منطق التحديث هو الأبطأ، فاستخدم أداة تحليل الأداء لفحص اختبارات التصادم وتكرار المرور على الكائنات. يعرض دليل MDN لتحسين Canvas هذه الأساليب كخيارات للتقييم، لا كمفاتيح تضمن تسريعاً في كل الحالات.
غيّر تكلفة واحدة وتحقق من النتيجة
اختر مصدراً محتملاً للتكلفة، مثل إعادة رسم خلفية ثابتة مراراً. خزّنها مؤقتاً في Canvas خارج الشاشة، ثم قارن قبل التغيير وبعده باستخدام المشهد نفسه. افحص الصورة بأحجام مختلفة وبعد تغيير الحجم؛ فقد يصبح التخزين المؤقت غير صحيح إذا استخدم أبعاداً قديمة أو غيّر مقياس النص.
سجّل الجهاز والمتصفح والمشهد والإجراء المستخدم في المقارنة. تساعد نتيجة جهاز واحد على تشخيص ذلك التشغيل، لكنها لا تثبت الأداء على كل المتصفحات والأجهزة. أعد اختبار التفاعل الأصلي، لأن تحسين المشهد الاصطناعي قد يجعل الاستجابة في موضع آخر أسوأ.
أسئلة عن أداء ألعاب Canvas
هل يجب علي إعادة رسم وحدات البكسل التي تم تغييرها فقط؟
يعتمد ذلك على تعقيد المشهد وكلفة إعادة الرسم بالكامل. يضيف الرسم الجزئي أعمالاً لإدارة المناطق، وقد يترك بكسلات قديمة حول الكائنات المتحركة؛ لذلك قارن الطريقتين في المشهد القابل للتكرار نفسه.
هل تضمن نصائح تجميع عمليات الرسم في Canvas تحسناً؟
لا، إنها فرضيات تستحق الاختبار. قِس الأداء في المتصفح وحمل العمل المستهدفين، ولا تحتفظ بالتغيير إلا إذا حسّن الاختناق المرصود من دون إفساد الرسم.
للمزيد من القراءة
هل لاحظت معلومة قديمة؟ الإبلاغ عن تصحيح