ویژگی async <script> HTML
تعریف و استفاده
async این ویژگی یک ویژگی بولان است.
اگر تنظیم شده باشد async این ویژگی، اسکریپت را به صورت همزمان با تحلیل صفحه بارگذاری می‌کند و در صورت امکان فوراً اجرا می‌شود. پس از بارگذاری کامل اسکریپت، تحلیل صفحه متوقف می‌شود، سپس اسکریپت اجرا می‌شود و تحلیل صفحه ادامه می‌یابد.
توجه:async این ویژگی فقط برای اسکریپت‌های خارجی مناسب است (و فقط باید در صورت وجود ویژگی src استفاده شود).
توجه:می‌توان از چندین روش برای اجرای اسکریپت‌های خارجی استفاده کرد:
- اگر async تنظیم شده باشد: اسکریپت به صورت همزمان با تحلیل صفحه بارگذاری می‌شود و در صورت امکان فوراً اجرا می‌شود (قبل از اتمام تحلیل)
- اگر defer تنظیم شده باشد (و async تنظیم نشده باشد): اسکریپت به صورت همزمان با تحلیل صفحه بارگذاری می‌شود و پس از اتمام تحلیل صفحه اجرا می‌شود
- اگر هم async و هم defer وجود نداشته باشد: اسکریپت فوراً بارگذاری و اجرا می‌شود و تحلیل صفحه را مسدود می‌کند تا زمانی که اسکریپت اجرا شود
مثال
اسکریپت‌های مرجع به صورت همزمان با تحلیل صفحه بارگذاری می‌شوند و در صورت امکان فوراً اجرا می‌شوند:
<script src="demo_async.js" async></script>
قوانین دستور زبان
<script async>
اجرای اسکریپت‌ها به صورت غیرهمزمان
عملکرد پیش‌فرض مرورگر هنگام برخورد با علامت‌گذاری script، در حالی که اسکریپت در حال بارگذاری و اجرا است، توقف پردازش صفحه است. علامت‌گذاری‌های script به ترتیب (به ترتیب تعریف شده) به صورت همزمان (در طول بارگذاری و اجرای اسکریپت دیگر چیزی را انجام نمی‌دهند) اجرا می‌شوند.
به عنوان روش پیش‌فرض برای پردازش اسکریپت‌ها، اجرای همزمان و پیاپی دارای معنایی خاص است. اما برخی از اسکریپت‌ها نیازی به این نوع پردازش ندارند و برای این دسته از اسکریپت‌ها می‌توان از async ویژگی برای بهبود عملکرد. یک مثال رایج در این زمینه اسکریپت‌های ردیابی (tracking script) است. این اسکریپت‌ها می‌توانند اطلاعات بازدیدهای کاربر از وب‌سایت را گزارش دهند تا شرکت‌های تبلیغاتی بتوانند بر اساس عادات کاربران تبلیغات خود را تنظیم و ارسال کنند، یا داده‌های آماری بازدیدکنندگان وب‌سایت را برای تحلیل جمع‌آوری کنند و غیره. این اسکریپت‌ها مستقل هستند و معمولاً نیازی به تعامل با عناصر مستند HTML ندارند. هیچ معنایی ندارد که صفحه را به علت بارگذاری این اسکریپت‌ها و ارسال گزارش به سرور خود به تأخیر بیندازیم.
استفاده شده async پس از تعیین ویژگی async، مرورگر در حالی که به عناصر دیگر HTML (شامل عناصر script دیگر) ادامه می‌دهد که به طور همزمان اسکریپت را بارگذاری و اجرا می‌کند. اگر به درستی استفاده شود، این می‌تواند عملکرد کلی بارگذاری را به طور قابل توجهی بهبود بخشد.
توجه:استفاده async یک پیامد مهم ویژگی async این است که اسکریپت‌های موجود در صفحه ممکن است دیگر به ترتیب تعریف شده خود اجرا نشوند. بنابراین، اگر اسکریپت از توابع یا مقادیر تعریف شده در اسکریپت‌های دیگر استفاده کند، استفاده از آن مناسب نیست async ویژگی.
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه‌ای اولین مرورگر هستند که از این ویژگی کامل پشتیبانی می‌کند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 8.0 | 10.0 | 3.6 | 5.1 | 15.0 |
