defer و async تغير متى يتم تحميل البرنامج النصي الخارجي <script> وتنفيذه بالنسبة لتحليل HTML. كلاهما يسمح للبرنامج النصي بالتحميل بالتوازي دون حجب المحلل — الفرق هو توقيت التنفيذ.
html
defer و async تغير متى يتم تحميل البرنامج النصي الخارجي <script> وتنفيذه بالنسبة لتحليل HTML. كلاهما يسمح للبرنامج النصي بالتحميل بالتوازي دون حجب المحلل — الفرق هو توقيت التنفيذ.
Normal: parse──stop──[download+exec]──parse──────── (slowest)
async: parse──────────────────exec──parse──────── (runs whenever it arrives)
defer: parse───────────────────────────parse──exec (after parsing, before DOMContentLoaded)
async | defer | |
|---|---|---|
| التحميل | بالتوازي | بالتوازي |
| التنفيذ | فور التحميل | بعد تحليل HTML بالكامل |
| محفوظ الترتيب؟ | لا (من ينتهي أولاً) | نعم (ترتيب المستند) |
| يحجب المحلل؟ | لفترة قصيرة فقط أثناء التنفيذ | أبداً |
defer — للبرامج النصية التي تلمس DOM أو تعتمد على بعضها البعض/الترتيب (رمز تطبيقك). يتم تشغيلها بعد وجود DOM، بالتسلسل، قبل DOMContentLoaded مباشرة.async — للبرامج النصية المستقلة من الجهات الخارجية التي لا تعتمد على DOM أو برامج نصية أخرى (التحليلات والإعلانات). الترتيب لا يهم، قم بتشغيلها في أسرع وقت ممكن.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
ملاحظة: كلاهما ينطبق فقط على البرامج النصية الخارجية (src); يتم تجاهلها في البرامج النصية المضمنة. وحدات ES (type="module") مؤجلة افتراضياً.
استخدام defer/async يمنع البرامج النصية من حجب تحليل HTML، مما يحسن بشكل مباشر أداء التحميل و First Contentful Paint.
اختيار الخيار الصحيح (defer للرمز المعتمد على DOM المرتب، async للبرامج النصية الخارجية التي لا تتطلب متابعة) يتجنب كل من التحميلات البطيئة وأخطاء اعتماد الترتيب.