تحسين مهلة الإدخال

تعرَّف على تأخير الإدخال وتعرَّف على أساليب تقليله من أجل تسريع التفاعل.

Jeremy Wagner

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

ما هو "تأخير الإدخال"؟

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

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

كيفية التعامل مع تأخير الإدخال

بوجهٍ عام، يجب أن يكون كل جزء من التفاعل قصيرًا قدر الإمكان حتى يتمكّن موقعك الإلكتروني من تحقيق أفضل أداء ممكن في ما يتعلّق بمقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) الحد الأدنى، بغض النظر عن جهاز المستخدم. إن التحقق باستمرار من تأخير الإدخال ليس سوى جزء واحد من استيفاء هذا الحد.

وبالتالي، يجب أن تسعى إلى تحقيق أقل مهلة ممكنة للإدخال{0} لتلبية مستوى "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) الحد الأقصى المسموح به. ومع ذلك، يجب أن تكون على دراية بأنه لا يمكنك توقع الاستغناء عن حالات تأخير الإدخال بالكامل. ما دمت تتجنّب الإفراط في تنفيذ سلاسل التعليمات الرئيسية بينما يحاول المستخدمون التفاعل مع صفحتك، من المفترض أن تكون مهلة الإدخال منخفضة بما يكفي لتجنُّب حدوث مشاكل.

كيفية تقليل تأخير الإدخال

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

تجنُّب الموقّتات المتكرّرة التي تبدأ فيها سلسلة الإجراءات الرئيسية بشكل مفرط

هناك دالتان شائعتان للموقّتات في JavaScript يمكن أن تساهم في تأخير الإدخال: setTimeout وsetInterval. الفرق بين الاثنين هو أنّ setTimeout يجدول معاودة الاتصال لتنفيذها بعد وقت محدّد. من ناحية أخرى، تعمل setInterval على جدولة معاودة الاتصال لتشغيلها كل n ملي ثانية إلى الأبد، أو إلى أن يتوقّف الموقّت باستخدام clearInterval.

ولا يمثل setTimeout أي مشكلة في حد ذاته، بل يمكن أن يكون مفيدًا في تجنُّب المهام الطويلة. ويعتمد ذلك على وقت انتهاء المهلة وما إذا كان المستخدم يحاول التفاعل مع الصفحة عند تنفيذ مهلة معاودة الاتصال.

بالإضافة إلى ذلك، يمكن تنفيذ الدالة setTimeout بشكل متكرّر أو بشكل متكرّر حيث إنها شبيهة بـ setInterval، ويفضَّل عدم جدولة التكرار التالي حتى اكتمال التكرار السابق. يعني ذلك أنّ التكرار الحلقي سينتج عن سلسلة التعليمات الرئيسية في كل مرة يتم فيها استدعاء الدالة setTimeout، ولكن عليك التأكّد من أنّ عملية معاودة الاتصال لن تؤدي إلى تنفيذ مهام زائدة.

تُجري setInterval معاودة الاتصال خلال فترة زمنية، وبالتالي من المرجح أن تعرقل التفاعلات. ويرجع ذلك إلى أنّ طبيعة setInterval المتكرّرة، على عكس مثيل واحد من استدعاء setTimeout، عملية استدعاء لمرة واحدة قد تعيق تفاعل المستخدم، تزيد احتمالية أن يعترض التفاعل، ما يزيد من تأخير إدخال التفاعل.

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

تجنُّب المهام الطويلة

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

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

الانتباه إلى تداخل التفاعل

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

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

• يمكنك إبطال المدخلات للحدّ من عدد مرات تنفيذ استدعاء الحدث خلال فترة زمنية معيّنة.
• استخدِم AbortController لإلغاء طلبات fetch الصادرة حتى لا تصبح سلسلة المحادثات الرئيسية مزدحمة عند معالجة طلبات معاودة الاتصال fetch. ملاحظة: يمكن أيضًا استخدام السمة signal لمثيل AbortController من أجل إلغاء الأحداث.

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

الخاتمة

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

صورة رئيسية من Unسباش، بقلم إريك ماكلين.