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

الأساسيات: كيفية تحميل البرامج النصية

افتراضيًا، عندما يواجه المتصفح علامة

1. إيقاف مؤقت لتحليل HTML
2. تحميل السكربت
3. ينفذ البرنامج النصي
4. استئناف تحليل HTML

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

المزامنة والتأجيل: سيف ذو حدين

غير متزامن

• ماذا يفعل: تنزيل البرنامج النصي بشكل غير متزامن مع استمرار تحليل HTML.
• عند التنفيذ: بمجرد تنزيله، يتم إيقاف تحليل HTML مؤقتًا.
• متى يتم استخدامه: نصوص برمجية مستقلة لا تعتمد على نصوص برمجية أخرى أو محتوى DOM.
• تحذير: يمكن التنفيذ خارج الترتيب، مما قد يؤدي إلى كسر التبعيات.

تأجيل

• ماذا يفعل: يقوم بتنزيل البرنامج النصي بينما يستمر تحليل HTML.
• عند التنفيذ: بعد اكتمال تحليل HTML، ولكن قبل حدث DOMContentLoaded.
• متى يتم استخدامه: البرامج النصية التي تعتمد على محتوى DOM أو تحتاج إلى التنفيذ بترتيب معين.
• تحذير: قد يؤخر تنفيذ الوظائف الهامة.

مقارنة السلوكيات

ترتيب التنفيذ: غير متزامن، تأجيل، وكلاهما

يعد فهم ترتيب تنفيذ البرامج النصية ذات السمات المختلفة أمرًا بالغ الأهمية لإدارة التبعيات وضمان الأداء الوظيفي المناسب. وإليك كيفية العمل:

1. النصوص البرمجية العادية (بدون مزامنة أو تأجيل):

   • نفذ بالترتيب الذي يظهر به في المستند.
   • حظر تحليل HTML حتى يتم تنزيلها وتنفيذها.

2. البرامج النصية غير المتزامنة:

   • قم بالتنزيل بالتوازي وتنفيذها بمجرد توفرها.
   • لا يوجد أمر تنفيذ مضمون؛ يتم تشغيلها بمجرد تنزيلها.
   • قد يتم تنفيذه قبل تحميل DOM بالكامل.

3. تأجيل البرامج النصية:

   • يتم التنزيل بالتوازي ولكن يتم التنفيذ فقط بعد اكتمال تحليل HTML.
   • نفذ بالترتيب الذي يظهر به في المستند.
   • يتم تشغيله قبل حدث DOMContentLoaded.

4. البرامج النصية مع كل من غير المتزامن والتأجيل:

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

مثال لأمر التنفيذ:

أمر التنفيذ المحتمل:

1. 1.js (تحليل الكتل)
2. 3.js أو 2.js (أيهما يتم تنزيله أولاً)
3. 2.js أو 3.js (أيهما يتم تنزيله ثانيًا)
4. 4.js
5. 5.js

لاحظ أنه يمكن تنفيذ 2 و3 بأي ترتيب أو حتى قبل 1 إذا استغرق تنزيل 1.js وقتًا أطول.

أفضل الممارسات

1. استخدم غير المتزامن للنصوص البرمجية المستقلة مثل التحليلات.
2. استخدم التأجيل للنصوص البرمجية التي تعتمد على DOM أو البرامج النصية الأخرى.
3. ضع البرامج النصية في بشكل غير متزامن أو قم بتأجيلها لبدء التنزيل مبكرًا.
4. بالنسبة للنصوص البرمجية الهامة، فكر في النصوص البرمجية المضمنة في .

دعم المتصفح

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