defer اور async اس بات کو بدلتے ہیں کہ ایک بیرونی <script> کب ڈاؤن لوڈ اور execute ہوتا ہے HTML parsing کے نسبت۔ دونوں اسکرپٹ کو بیک وقت ڈاؤن لوڈ کرنے دیتے ہیں بغیر parser کو روکے — فرق execution کے وقت میں ہے۔
html
defer اور async اس بات کو بدلتے ہیں کہ ایک بیرونی <script> کب ڈاؤن لوڈ اور execute ہوتا ہے HTML parsing کے نسبت۔ دونوں اسکرپٹ کو بیک وقت ڈاؤن لوڈ کرنے دیتے ہیں بغیر parser کو روکے — فرق execution کے وقت میں ہے۔
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 | |
|---|---|---|
| ڈاؤن لوڈ | بیک وقت | بیک وقت |
| Execute ہوتا ہے | جیسے ہی ڈاؤن لوڈ ہو | HTML مکمل طور پر parse ہونے کے بعد |
| ترتیب محفوظ رہتی ہے؟ | نہیں (جو پہلے ختم ہو) | ہاں (دستاویز کی ترتیب) |
| Parser کو روکتا ہے؟ | execution کے دوران مختصر وقت | کبھی نہیں |
defer — اسکرپٹس کے لیے جو DOM کو چھوتے ہیں یا ایک دوسرے پر منحصر ہیں (آپ کا app code)۔ یہ DOM کے موجود ہونے کے بعد، ترتیب میں، DOMContentLoaded سے پہلے چلتے ہیں۔async — آزاد تیسری فریق اسکرپٹس کے لیے جو DOM یا دوسری اسکرپٹس پر منحصر نہیں ہیں (analytics، ads)۔ ترتیب سے کوئی فرق نہیں، انہیں جلد سے جلد چلائیں۔<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
نوٹ: دونوں صرف بیرونی اسکرپٹس پر لاگو ہوتے ہیں (src); وہ inline اسکرپٹس پر نظر انداز کیے جاتے ہیں۔ ES modules (type="module") ڈیفالٹ طور پر deferred ہوتے ہیں۔
defer/async استعمال کرنا اسکرپٹس کو HTML parsing کو روکنے سے روکتا ہے، جو براہ راست load performance اور First Contentful Paint کو بہتر بناتا ہے۔
صحیح منتخب کرنا (defer ترتیب شدہ DOM-منحصر app code کے لیے، async fire-and-forget تیسری فریق اسکرپٹس کے لیے) سست loads اور order-dependency کے bugs سے بچاتا ہے۔