رفض معالجات الإدخال

تُعدّ معالجات الإدخال سببًا محتملاً لمشاكل الأداء في تطبيقاتكم، لأنّها يمكن أن تمنع إكمال الإطارات، ويمكن أن تتسبّب في عمل إضافي وغير ضروري في التصميم.

تُعدّ معالجات الإدخال سببًا محتملاً لمشاكل الأداء في تطبيقاتكم، لأنّها يمكن أن تمنع إكمال الإطارات، ويمكن أن تتسبّب في عمل إضافي وغير ضروري في التصميم.

ملخّص

• تجنَّبوا معالجات الإدخال التي تستغرق وقتًا طويلاً، لأنّها يمكن أن تمنع التمرير.
• لا تُجروا تغييرات في الأنماط في معالجات الإدخال.
• تجنَّبوا تكرار معالجاتكم، وخزِّنوا قيم الأحداث وتعاملوا مع تغييرات الأنماط في معاودة الاتصال التالية لـ `requestAnimationFrame`.

تجنَّبوا معالجات الإدخال التي تستغرق وقتًا طويلاً

في أسرع سيناريو ممكن، عندما يتفاعل المستخدم مع الصفحة، يمكن أن تأخذ سلسلة التعليمات الخاصة بـ Compositor في الصفحة إدخال اللمس من المستخدم وتنقل المحتوى ببساطة. لا يتطلّب ذلك أي عمل من سلسلة التعليمات الرئيسية، حيث يتم تنفيذ JavaScript أو التصميم أو الأنماط أو الرسم.

ومع ذلك، إذا أرفقتم معالج إدخال، مثل touchstart أو touchmove أو touchend، يجب أن تنتظر سلسلة التعليمات الخاصة بـ Compositor حتى ينتهي تنفيذ هذا المعالج لأنّه يمكنكم اختيار استدعاء preventDefault() ومنع حدوث التمرير باللمس. حتى إذا لم تستدعوا preventDefault()، يجب أن تنتظر سلسلة التعليمات الخاصة بـ Compositor، وبالتالي يتم منع تمرير المستخدم، ما قد يؤدي إلى التقطّع والإطارات التي لم يتم عرضها.

باختصار، يجب التأكّد من أنّ أي معالجات إدخال تُشغّلونها يجب أن يتم تنفيذها بسرعة وأن تسمح لـ Compositor بأداء مهمته.

تجنَّبوا تغييرات الأنماط في معالجات الإدخال

يتم جدولة معالجات الإدخال، مثل معالجات التمرير واللمس، ليتم تشغيلها قبل أي معاودات اتصال لـ requestAnimationFrame مباشرةً.

إذا أحدثتم تغييرًا مرئيًا داخل أحد هذه المعالجات، ستكون هناك تغييرات في الأنماط معلّقة في بداية requestAnimationFrame. إذا قرأتم بعد ذلك الخصائص المرئية في بداية معاودة الاتصال لـ `requestAnimationFrame`، كما تنصح الإرشادات الواردة في مقالة "تجنُّب التصاميم الكبيرة والمعقّدة والتصاميم المتكرّرة"، سيؤدي ذلك إلى تشغيل تصميم متزامن إجباري.

تجنَّبوا تكرار معالجات التمرير

إنّ حلّ كلتا المشكلتَين أعلاه هو نفسه: يجب دائمًا تجنُّب تكرار التغييرات المرئية لمعاودة الاتصال التالية لـ requestAnimationFrame:

function onScroll (evt) {

    // Store the scroll value for laterz.
    lastScrollY = window.scrollY;

    // Prevent multiple rAF callbacks.
    if (scheduledAnimationFrame)
    return;

    scheduledAnimationFrame = true;
    requestAnimationFrame(readAndUpdatePage);
}

window.addEventListener('scroll', onScroll);

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