الخاصية defer في وسم <script> تجعل المتصفح يحمّل السكربت في الخلفية دون أن يوقف عرض الصفحة، ثم ينفّذه بعد أن ينتهي من قراءة HTML بالكامل.

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

ما المشكلة التي تحلّها؟

من دون defer، عندما يصل المتصفح إلى وسم <script> يتوقف عن قراءة الصفحة حتى يحمّل السكربت وينفّذه. هذا يبطئ ظهور الصفحة، خاصة على الجوال.

كيف يعمل defer؟

• يتم تحميل السكربت بالتوازي مع قراءة HTML.
• يُنفَّذ بعد انتهاء قراءة HTML، وقبل الحدث DOMContentLoaded.
• إذا كان هناك أكثر من سكربت بـ defer فإنها تُنفَّذ بترتيب ظهورها في الصفحة.

الفرق بين defer وasync

async أيضًا يحمّل في الخلفية، لكنه ينفّذ السكربت فور انتهاء تحميله، دون انتظار الصفحة ودون ترتيب. لذلك defer أنسب للسكربتات التي تتعامل مع عناصر الصفحة أو تعتمد على بعضها.