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

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

Jeremy Wagner

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

ما هي مهلة الاستجابة للإدخال؟

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

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

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

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

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

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

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

تجنَّب استخدام الموقّتات المتكررة التي تبدأ العمل على سلسلة التعليمات الرئيسية بشكل مفرط

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

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

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

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

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

تجنُّب المهام التي يستغرق تنفيذها وقتًا طويلاً

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

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

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

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

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

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

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

الخاتمة

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