هل تعمل مهام JavaScript الطويلة على تأخير وقت التفاعل؟

تعرّف على كيفية تشخيص العمل المكلف الذي يمنع تفاعل المستخدم.

آدي عثمانية
آدي عثمانية

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

إذا كنت تستخدم Lighthouse للتدقيق في صفحاتك، قد تكون على دراية بمقياس وقت التفاعل، وهو مقياس يمثّل الوقت الذي يمكن للمستخدمين فيه التفاعل مع صفحتك والحصول على رد. لكن هل تعلم أن المهام الطويلة (JavaScript) يمكن أن تساهم بشكل كبير في ضعف TTI؟

عرض أداة "Time to Interactive" (وقت التفاعل) في تقرير Lighthouse

ما المقصود بالمهام الطويلة؟

المهمة الطويلة هي رمز JavaScript يحتضن سلسلة التعليمات الرئيسية لفترات زمنية طويلة، ما يؤدي إلى "توقُّف واجهة المستخدم" عن العمل.

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

تحدث المهام الطويلة التي تستهلك قدرًا كبيرًا من وحدة المعالجة المركزية (CPU) بسبب العمل المعقد الذي يستغرق وقتًا أطول من 50 ملي ثانية. لماذا 50 ملي ثانية؟ يقترح نموذج RAIL معالجة أحداث إدخال المستخدم في 50 ملي ثانية لضمان استجابة مرئية في غضون 100 ملي ثانية. إذا لم يسبق لك ذلك، يصبح الرابط بين الإجراء والتفاعل معطّل.

هل هناك مهام طويلة في صفحتي قد تؤدي إلى تأخير التفاعل؟

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

لقطة شاشة للوحة "الأداء" في أدوات مطوّري البرامج تعرض الاختلافات بين المهام القصيرة والمهام الطويلة

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

أدوات مطوّري البرامج تصوّر المهام الطويلة على شكل أشرطة رمادية في لوحة الأداء مع علامة حمراء للمهام الطويلة

  • سجِّل تتبُّعًا في لوحة الأداء لتحميل صفحة ويب.
  • ابحث عن العلامة الحمراء في عرض سلسلة المحادثات الرئيسي. يُفترض أن تظهر لك المهام الآن باللون الرمادي ("Task").
  • سيتيح لك تحريك مؤشر الماوس فوق أحد الشريطين معرفة مدة المهمة وما إذا كانت تُعتبر "طويلة".

ما سبب مهامي الطويلة؟

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

إنّ اختيار مهمة طويلة (تحمل اسم "المهمة") في "أدوات مطوري البرامج" يتيح لنا التوغّل في الأنشطة المسؤولة عنها.

ما هي الطرق الشائعة لتحسين المهام الطويلة؟

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

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

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