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

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

Paul Lewis

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

ملخّص

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

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

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

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

باختصار، يجب أن تتأكد من أن أي معالِجات إدخال تقوم بتشغيلها يجب تنفيذها بسرعة والسماح لأداة التركيب بالقيام بعملها.

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

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

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