HTML Academy · درس

سمتا async وdefer

تحميل النصوص البرمجية دون حظر تحليل HTML

سمتا async وdefer درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

السلوك الافتراضي للبرنامج النصي

يمنع <script src="..."> العادي، من دون async أو defer، تحليل HTML أثناء تنزيله وتنفيذه. ويتوقف تصيير كل ما يقع أسفل البرنامج النصي، ولهذا كانت البرامج النصية توضع تقليديًا في نهاية <body>.

ينزّل async بالتوازي

ينزّل <script async src="..."> البرنامج النصي بالتوازي مع تحليل HTML وينفذه فور وصوله. ويظل التنفيذ يوقف تحليل HTML، لكن لفترة وجيزة فقط — فالبرنامج النصي لا يمنع تنزيل الموارد الأخرى.

ترتيب تنفيذ async غير متوقع

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

ينتظر defer اكتمال HTML

يُنزل <script defer src="..."> بالتوازي مثل async، لكن يؤجل التنفيذ حتى تحليل HTML بالكامل — أي قبل حدث DOMContentLoaded مباشرة. ولا يوقف البرنامج النصي التحليل مطلقًا.

<script defer src="app.js"></script>
<script defer src="analytics.js"></script>

يحافظ defer على الترتيب

تُنفّذ عدة برامج نصية تستخدم defer بترتيب تعريفها، تمامًا مثل البرامج النصية العادية في نهاية body. وهذا يجعل defer الخيار المناسب للبرامج النصية التابعة: تُحمّل الأدوات قبل المستهلكين من دون تنسيق يدوي.

الاختيار بين async وdefer

استخدموا async للمقتطفات المستقلة التابعة لجهات خارجية، مثل التحليلات والإعلانات، التي لا تتعامل مع DOM ولا تعتمد على أي تبعيات. واستخدموا defer لشفرة التطبيق الخاصة بكم التي تحتاج إلى DOM وتعتمد على برامج نصية أخرى.

الوحدات مؤجلة افتراضيًا

يتصرف <script type="module"> تلقائيًا مثل defer — إذ يُنزل بالتوازي، ويُنفّذ بعد التحليل، ويحافظ على الترتيب. وتُسمح إضافة defer إلى الوحدة لكنها زائدة عن الحاجة؛ أما إضافة async فتُعيدها إلى سلوك async.

تتجاهل البرامج النصية المضمّنة async وdefer

ينطبق async وdefer على البرامج النصية الخارجية فقط، أي التي تتضمن src. أما وسم <script> المضمّن فيُنفّذ فورًا بغض النظر عن السمات، ولذلك يتم تجاهل السمات بصمت في <script>console.log(1)</script>.

أصبح موضع الإدراج أقل أهمية

مع defer أو الوحدات، يمكن وضع وسوم <script> داخل <head> من دون إيقاف التحليل — كما أن وضعها هناك يتيح للمتصفح اكتشافها وبدء تنزيلها في وقت أبكر من وضعها في نهاية <body>.

<head>
  <script defer src="app.js"></script>
</head>

الدمج مع preload

بالنسبة إلى البرامج النصية الحساسة لزمن الاستجابة، اقرنوا <link rel="preload" as="script" href="..."> داخل head مع برنامج نصي مؤجل في الأسفل. يبدأ preload التنزيل فورًا، بينما يضمن defer بقاء ترتيب التنفيذ صحيحًا.

مشكلة شائعة

يُعد وضع async لبرنامج نصي من دون التحقق من انعدام تبعياته السبب الأكثر شيوعًا لظروف التنافس التي تؤدي إلى عبارة "يعمل على جهازي، لكنه يتعطل في بيئة الإنتاج". وعند الشك، فضّلوا defer — فهو أكثر تسامحًا، بينما async صارم للغاية.

اختبار المعرفة

ما الفرق بين async وdefer بالنسبة إلى برنامجين نصيين يعتمد الثاني منهما على الأول؟

الملخص

ينزّل كل من async وdefer البرامج النصية بالتوازي مع تحليل HTML. يُنفّذ async فور الوصول بترتيب غير متوقع — فاستخدموه للمقتطفات المستقلة التابعة لجهات خارجية. أما defer فيُنفّذ بعد التحليل وبترتيب التعريف — فاستخدموه لشفرة التطبيق ذات التبعيات. وتستخدم الوحدات سلوك defer افتراضيًا.

الأسئلة الشائعة

هل درس «سمتا async وdefer» مجاني؟

نعم — نص درس «سمتا async وdefer» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «سمتا async وdefer»؟

تحميل النصوص البرمجية دون حظر تحليل HTML تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «سمتا async وdefer»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy