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

Addy Osmani

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

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

أصبح بإمكان "أدوات مطوري البرامج في Chrome" الآن عرض المهام الطويلة، مما يسهّل الاطّلاع على المهام التي تحتاج إلى تحسين.

ما الذي يتم اعتباره مهمة طويلة؟

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

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

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

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

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

لاستخدام أداة التصور الجديدة:

1. سجِّل تتبُّعًا في لوحة الأداء لتحميل صفحة ويب.
2. ابحث عن العلامة الحمراء في عرض سلسلة المحادثات الرئيسي. يُفترض أن تظهر لك المهام الآن مميزة باللون الرمادي وتحمل اسم مهمة.
3. ضَع المؤشر فوق شريط رمادي. سترى مربع حوار يوضح مدة المهمة وما إذا كانت تعتبر مهمة طويلة.

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

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

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

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

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

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