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

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

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

ملخّص

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

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

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

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

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

تجنُّب تغييرات التصميم في عناصر معالجة الإدخال

تمت جدولة تشغيل معالِجات الإدخال، مثل المعالِجات الخاصة بالتمرير واللمس، قبل أي استدعاءات لـ 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);

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