معالِجات الإدخال هي سبب محتمل لمشاكل الأداء في تطبيقاتك، لأنّها قد تمنع اكتمال عمل الإطارات، ويمكن أن تؤدّي إلى عمل تصميم إضافي وغير ضروري.
تعد معالِجات الإدخال سببًا محتملاً لمشكلات الأداء في تطبيقاتك، لأنها يمكنها أن تمنع اكتمال الإطارات ويمكن أن تتسبب في أعمال تخطيط إضافية وغير ضرورية.
ملخّص
- تجنب معالِجات الإدخال التي تستغرق وقتًا طويلاً، لأنها قد تمنع التمرير.
- عدم إجراء تغييرات على النمط في معالِجات الإدخال.
- يمكنك تجاهل المعالِجات، وتخزين قيم الأحداث والتعامل مع تغييرات النمط في معاودة الاتصال requestAnimationFrame التالية.
تجنُّب معالِجات الإدخال التي تستغرق وقتًا طويلاً
في أسرع حالة ممكنة، عندما يتفاعل المستخدم مع الصفحة، يمكن لسلسلة محادثات المكوّن الخاصة بالصفحة أخذ الإدخال باللمس للمستخدم ونقل المحتوى إليه. ولا يتطلب ذلك أي عمل من سلسلة التعليمات الرئيسية، حيث يتم تنفيذ JavaScript أو التنسيق أو الأنماط أو الرسم.
![تمرير خفيف، مكوّن فقط.](https://web.developers.google.cn/static/articles/debounce-your-input-handlers/image/lightweight-scrolling-co-d1e531e7414ca.jpg?authuser=6&hl=ar)
ومع ذلك، في حال إرفاق معالِج إدخال، مثل touchstart
أو touchmove
أو touchend
، يجب أن تنتظر سلسلة محادثات المكوّن حتى انتهاء تنفيذ هذا المعالِج لأنّك يمكنك اختيار طلب preventDefault()
وإيقاف عملية الانتقال باللمس. حتى في حال عدم طلب الرمز preventDefault()
، يجب على المكوّن الإضافي الانتظار، وبالتالي يتم حظر عملية الانتقال عند المستخدم، ما قد يؤدي إلى حدوث التقطُّع وفقدان اللقطات.
![التمرير الثقيل: تم حظر المكوّن على JavaScript.](https://web.developers.google.cn/static/articles/debounce-your-input-handlers/image/heavy-scrolling-composit-2d22d7b7e1daa.jpg?authuser=6&hl=ar)
باختصار، يجب عليك التأكد من أن أي معالجات إدخال تقوم بتشغيلها يجب أن يتم تنفيذها بسرعة وتسمح للمكون بالقيام بوظيفته.
تجنُّب تغييرات النمط في معالِجات الإدخال
من المقرر أن يتم تشغيل معالِجات الإدخال، مثل معالِجات التمرير واللمس، قبل أي استدعاءات requestAnimationFrame
مباشرةً.
وفي حال إجراء تغيير مرئي داخل أحد هذه المعالِجات، ستكون هناك تغييرات في النمط معلّقة في بداية requestAnimationFrame
. إذا قرأت بعد ذلك الخصائص المرئية في بداية استدعاء requestAnimationFrame، كما تشير النصيحة في "تجنُّب التنسيقات الكبيرة والمعقدة وكسر التنسيق"، سيتم فرض تنسيق متزامن إجباري.
![التمرير الثقيل: تم حظر المكوّن على JavaScript.](https://web.developers.google.cn/static/articles/debounce-your-input-handlers/image/heavy-scrolling-composit-151ee35865c54.jpg?authuser=6&hl=ar)
إيقاف معالِجات التمرير
إنّ الحل لكلا المشكلتَين أعلاه هو نفسه: يجب دائمًا إيقاف التغييرات المرئية عند معاودة الاتصال في 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);
يؤدي القيام بذلك أيضًا إلى فائدة إضافية تتمثل في إبقاء معالِجات الإدخال خفيفة، وهو أمر رائع لأنك الآن لا تحظر أشياء مثل التمرير أو اللمس على رمز باهظ الثمن من الناحية الحسابية!