شرح صفوف ومحتوى الفقرة
عند استخدام JavaScript في صفحات HTML، يمكننا تحميل وتنفيذ الأكواد بطرق مختلفة. من بين هذه الطرق، نجد defer و async، وهما طريقتان يتم استخدامهما عند تحميل ملفات JavaScript الخارجية باستخدام عنصر script.
الفرق بين defer و async:
| الطريقة | متى يتم تحميل السكريبت؟ | متى يتم تنفيذ السكريبت؟ | التأثير على تحميل الصفحة | ملاحظة |
| defer | يتم تحميله بالتوازي مع تحميل HTML | يتم تنفيذه بعد اكتمال تحميل وتحليل HTML بالكامل | لا يوقف تحميل الصفحة، ويُنفذ بعد تحميل DOM | لا تحدث مشاكل اثناء التحميل |
| async | يتم تحميله بالتوازي مع تحميل HTML | يتم تنفيذه بمجرد اكتمال تحميله، حتى لو لم يكتمل تحميل HTML | قد يوقف تحميل الصفحة مؤقتًا إذا تم تنفيذه قبل اكتمال تحميل HTML | تحدث مشاكل اثناء التحميل |
متى نستخدم defer؟
- عند الحاجة إلى تنفيذ الأكواد بعد تحميل عناصر HTML بالكامل.
- عندما يكون هناك سكريبت يحتاج إلى التعامل مع عناصر HTML داخل الصفحة.
- يُستخدم غالبًا مع الملفات التي تحتوي على أكواد JavaScript تتفاعل مع DOM.
متى نستخدم async؟
- عند تحميل سكريبتات لا تعتمد على عناصر HTML، مثل أدوات التحليل والإعلانات.
- عندما نريد تحميل سكريبتات صغيرة بسرعة دون انتظار تحميل الصفحة بالكامل.
- يُستخدم غالبًا مع ملفات JavaScript التي لا تحتاج إلى التفاعل مع DOM مباشرةً.
كيفية استخدام defer و async؟
مثال على defer:
سيتم تحميل script.js بالتوازي مع تحميل HTML وسيتم تنفيذ الكود بعد اكتمال تحميل الصفحة بالكامل.
HTML
<script src="script.js" defer></script>مثال على async:
سيتم تحميل script.js بالتوازي مع تحميل HTML وسيتم تنفيذ الكود بمجرد تحميله، دون انتظار تحميل بقية الصفحة.
HTML
<script src="script.js" async></script>الخلاصة:
defer هو الخيار الأفضل عندما يكون الكود بحاجة إلى التعامل مع عناصر HTML.
async يُستخدم عندما لا يعتمد الكود على DOM ويمكن تشغيله في أي وقت دون التأثير على الصفحة.