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 للبرامج النصية الخارجية التي لا تتطلب متابعة) يتجنب كل من التحميلات البطيئة وأخطاء اعتماد الترتيب.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع