تفاوت‌های کلیدی بین async و defer در اسکریپت‌های HTML
هنگام بارگذاری اسکریپت‌های جاوااسکریپت در صفحات وب، دو ویژگی مهم async و defer نقش تعیین‌کننده‌ای در عملکرد و زمان‌بندی اجرای کدها دارند. درک صحیح این مفاهیم برای بهینه‌سازی سرعت بارگذاری صفحه ضروری است.
هر دو ویژگی async و defer برای اسکریپت‌های خارجی کاربرد دارند و باعث می‌شوند بارگذاری اسکریپت به صورت غیرمسدودکننده انجام شود.
مقایسه رفتاری async و defer
| ویژگی |
async |
defer |
| زمان بارگذاری |
موازی با تجزیه HTML |
موازی با تجزیه HTML |
| زمان اجرا |
بلافاصله پس از دانلود |
پس از تکمیل تجزیه HTML |
| ترتیب اجرا |
غیرقابل پیش‌بینی (اولین دانلود شده) |
حفظ ترتیب تعریف در سند |
موارد استفاده مناسب
- استفاده از async: برای اسکریپت‌های مستقل مانند تحلیلی‌های وب که به DOM وابسته نیستند
- استفاده از defer: برای اسکریپت‌هایی که به DOM کامل نیاز دارند یا ترتیب اجرای آن‌ها مهم است
- اسکریپت‌های حیاتی که صفحه به آن‌ها وابسته است بهتر است در > با defer قرار گیرند
برای مثال‌های عملی از پیاده‌سازی این ویژگی‌ها می‌توانید اینجا را نگاه کنید.
نکات فنی مهم
- استفاده همزمان از async و defer در یک تگ script ممکن است رفتار غیرمنتظره ایجاد کند
- در مرورگرهای مدرن، defer همیشه ترتیب اسکریپت‌ها را حفظ می‌کند
- اسکریپت‌های با نوع module به صورت پیش‌فرض defer رفتار می‌کنند
در انتخاب بین async و defer باید به وابستگی‌های اسکریپت و اولویت‌های عملکردی توجه کرد. اسکریپت‌های حیاتی که صفحه به آن‌ها وابسته است معمولاً با defer بهتر عمل می‌کنند، در حالی که اسکریپت‌های مستقل می‌توانند از async برای اجرای سریع‌تر بهره ببرند.
