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

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

Jeremy Wagner

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

ما هو المقصود بتأخير الإدخال؟

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

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

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

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

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

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

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

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

تجنُّب الموقتات المتكررة التي تؤدي إلى تشغيل سلسلة التعليمات الرئيسية بشكل مفرط

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

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

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

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

موقّت تم تسجيله من خلال مكالمة سابقة على "setInterval" يساهم في تأخير الإدخال كما هو موضّح في لوحة الأداء في "أدوات مطوري البرامج في Chrome". يؤدي تأخير الإدخال المضاف إلى تنفيذ استدعاءات الحدث للتفاعل بعد مما يمكن أن يحدث في الحالات الأخرى.

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

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

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

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

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

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

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

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

عرض مرئي لتفاعلَين متزامنَين في محلّل الأداء في "أدوات مطوري البرامج في Chrome". يؤدي عمل العرض في تفاعل النقر الأولي إلى تأخير الإدخال لتفاعل لوحة المفاتيح اللاحق.

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

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

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

الخلاصة

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

صورة رئيسية من UnLaunch، للفنان إريك ماكلين.