المهمة التي تستغرق وقتًا طويلاً هي رمز JavaScript الذي يحتكر سلسلة التعليمات الرئيسية لفترات طويلة من الزمن، ويؤدي إلى "توقُّف" واجهة المستخدم.
أثناء تحميل صفحة، يمكن أن تشغل "المهام الطويلة" سلسلة المحادثات الرئيسية وتجعل الصفحة لا تستجيب لإدخالات المستخدم، حتى إذا بدت جاهزة. غالبًا ما لا تعمل النقرات والنقرات لأنّ الميزات التفاعلية، مثل أدوات الاستماع إلى الأحداث ومعالجات النقرات، لم يتم إرفاقها بعد بعناصر واجهة المستخدم. ولهذا السبب، يمكن أن تؤدي "المهام الطويلة" إلى زيادة وقت التفاعل بشكل كبير.
يمكن الآن لأدوات مطوّري البرامج في Chrome عرض المهام التي تستغرق وقتًا طويلاً، مما يسهّل الاطّلاع على المهام التي تحتاج إلى تحسين.
ما الذي يُعدّ مهمة طويلة؟
تحدث المهام الطويلة التي تستهلك موارد وحدة المعالجة المركزية بسبب العمل المعقد الذي يستغرق وقتًا أطول من 50 ملي ثانية. يقترح نموذج RAIL معالجة أحداث معالجة إدخال المستخدم في 50 ملي ثانية لضمان حصولك على استجابة مرئية في غضون 100 ملي ثانية والحفاظ على الربط بين الإجراء وردّ الفعل.
النقطة الرئيسية: على الرغم من أنّ نموذج RAIL يقترح تقديم استجابة مرئية للبيانات التي يُدخلها المستخدِم في غضون 100 ملي ثانية، فإنّ الحدود الدنيا لمقياس مدى استجابة الصفحة لتفاعلات المستخدِم (INP) تسمح بحد أقصى 200 ملي ثانية لضبط توقعات أكثر قابلية للتحقيق، خاصةً على الأجهزة البطيئة.
هل هناك مهام طويلة في صفحتي يمكن أن تؤخّر التفاعل؟
حتى الآن، كان عليك البحث يدويًا عن "الوحدات الصفراء الطويلة" من النصوص البرمجية التي تزيد مدّتها عن 50 ملي ثانية في Chrome DevTools أو استخدام Long Tasks API لمعرفة المهام التي تؤخّر التفاعل.
للمساعدة في تسهيل سير عمل تدقيق الأداء، تعرض الآن أدوات المطوّرين المهام الطويلة بشكل مرئي. تظهر علامة حمراء على المهام (المعروضة باللون الرمادي) إذا كانت مهام طويلة.
لاستخدام أداة العروض المرئية الجديدة:
- سجِّل عملية تتبُّع في لوحة الأداء لتحميل صفحة ويب.
- ابحث عن علامة حمراء في عرض سلسلة المحادثات الرئيسية. من المفترض أن تظهر المهام الآن مميّزة باللون الرمادي ومصنّفة باسم مهمة.
- مرِّر مؤشر الماوس فوق شريط رمادي. سيظهر لك مربّع حوار يعرض مدّة مهمة وما إذا كانت تُعدّ مهمة طويلة.
ما هي أسباب ظهور "المهام الطويلة"؟
لمعرفة سبب طول مدة تنفيذ المهمة، انقر على شريط المهمة الرمادي. في الدرج أسفل الصفحة، اختَر من الأسفل إلى الأعلى والتجميع حسب النشاط. يتيح لك ذلك معرفة الأنشطة التي ساهمت بشكلٍ كبير (بشكلٍ عام) في استغراق المهام وقتًا طويلاً لإكمالها. في المثال التالي، يبدو أنّ سبب التأخير هو مجموعة طلبات بحث DOM باهظة التكلفة.
ما هي الطرق الشائعة لتحسين "المهام الطويلة"؟
غالبًا ما تكون النصوص البرمجية الكبيرة سببًا رئيسيًا في ظهور "المهام الطويلة". ننصحك بتقسيمها. عليك أيضًا الانتباه إلى النصوص البرمجية التابعة لجهات خارجية، والتي يمكن أن تحتوي أيضًا على مهام طويلة تؤدي إلى تأخير تفاعل المحتوى الأساسي.
قسِّم كل عملك إلى أجزاء يتم تنفيذها في أقل من 50 ملي ثانية، ونفِّذ هذه الأجزاء في المكان والوقت المناسبَين. وقد يكون المكان المناسب لبعض هذه المهام خارج السلسلة الأساسية في أحد مهام الخدمة. للحصول على إرشادات حول تقسيم المهام الطويلة، يمكنك الاطّلاع على مقالة تحسين المهام الطويلة ومقالة Idle Until Urgent التي كتبها "فيل والتون".
يجب أن تكون صفحاتك سريعة الاستجابة. إنّ تقليل المهام الطويلة هو طريقة رائعة لضمان حصول المستخدمين على تجربة ممتعة عند زيارة موقعك الإلكتروني. لمزيد من المعلومات عن المهام الطويلة، يُرجى الرجوع إلى مقالة مقاييس الأداء المستندة إلى المستخدِم.