الفرق بين خاصية async و defer لعنصر script في HTML

عن async و defer

• كلتا الخاصيتين تتطلبان حضور خاصية src وتعملان فقط مع السكربتات الخارجية.
• async تفوز على defer إذا تم استخدامهما معًا في نفس السكربت.
• السكربتات التي تحمل type="module" يتم تأجيلها افتراضيًا (تعمل مثل deffer).
• السكربتات التي يتم إنشاؤها باستخدام document.createElement(‘script’) تكون async بشكل افتراضي.
• يتم تجاهل async و defer في السكربتات المضمنة (inline) التي لا تحتوي على خاصية src.

السكربتات بدون defer أو async

لفهم الفرق بين async و defer بشكل أفضل، دعونا نرى أولاً ما يحدث عندما لا نقوم بتعيين أي منهما.

1. يقوم المتصفح بجلب HTML.
2. يبدأ في تحليل HTML لتكوين DOM.
3. يعثر على عنصر السكربت.
4. يتوقف المحلل حتى يتم تحميل السكربت و تنفيذه.

هذا يعني أن السكربت لا يعرف عن العناصر التي تحته، وبالتالي لا يمكنه التفاعل معها.

علاوة على ذلك، يمكن أن تؤدي تحميل السكربتات الكبيرة في أعلى HTML إلى إبطاء المواقع وإظهار شاشة فارغة لمدة طويلة.

حل بسيط وغير فعال هو وضع السكربت في أسفل الصفحة.

السكربتات مع async

عند إضافة خاصية async إلى عنصر السكربت، يتم اتباع نفس العملية كما في السابق. لكن هذه المرة، يتم تحميل السكربت في خيط منفصل بالتوازي مع تحليل HTML، وعندما يتم الانتهاء من تحميله، يعوق تنفيذه المحلل.

ترتيب تنفيذ السكربتات المتعددة مع async غير مضمون، حيث سيتم تنفيذ كل سكربت بمجرد تحميله.

السكربتات مع defer

على غرار async، يتم تحميل السكربتات المؤجلة في الخلفية دون إعاقة عملية التحليل، و تنفذ فقط بعد اكتمال التحليل.

هذا يعني أن السكربتات المؤجلة لن تعيق محلل HTML ويمكنها التفاعل مع العناصر الأخرى حتى لو جاءت بعد السكربت.

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

<p class="name"></p> <!-- يمكن للسكربت الوصول إلى هذه الفقرة -->

أيضًا، ستنفذ السكربتات المؤجلة بالترتيب الذي تم تحديدها فيه.

متى نستخدم defer مقابل async؟

• استخدم <script> وحده للسكربتات الصغيرة المدمجة لإعداد الإعدادات العامة.
• استخدم async للسكربتات المستقلة مثل التحليلات (analytics).
• استخدم defer للسكربتات التي تتلاعب بـ DOM أو تعتمد على سكربتات أخرى.