خصوصية async لـ HTML <script>
التعريف والاستخدام
async الخاصية هي خاصية بولية.
إذا تم تعيين async سيتم تحميل السكربت بشكل متوازي أثناء تحليل الصفحة، وسيتم تنفيذه عند توفره. بعد تحميل السكربت بالكامل، سيتم إيقاف تحليل الصفحة، ثم تنفيذ السكربت، ثم استئناف تحليل باقي الصفحة.
ملاحظة:async يُستخدم الخاصية فقط للسكربتات الخارجية (ويجب استخدامها فقط عند وجود خاصية src).
ملاحظة:يمكن تنفيذ سكربتات خارجية بعدة طرق:
- إذا تم تعيين async: سيتم تحميل السكربت بشكل متوازي أثناء تحليل الصفحة، وسيتم تنفيذه عند توفره (قبل اكتمال التحليل)
- إذا تم تعيين defer (ولم يتم تعيين async): سيتم تحميل السكربت بشكل متوازي أثناء تحليل الصفحة، وسيتم تنفيذه بعد اكتمال تحليل الصفحة
- إذا لم يتم تعيين async ولا defer: سيتم تحميل وتنفيذ السكربت على الفور، مما يمنع تحليل الصفحة حتى اكتمال تنفيذ السكربت
مثال
سيتم تحميل السكربت المشار إليه أثناء تحليل الصفحة بشكل متوازي، وسيتم تنفيذه فور توفره:
<script src="demo_async.js" async></script>
النحو
<script async>
تنفيذ سكربت غير متزامن
سلوك متصفح الويب عند مواجهة عنصر script افتراضي هو التوقف عن معالجة الصفحة أثناء تحميل وتنفيذ السكربت. يتم تنفيذ جميع عناصر script بشكل متزامن (لا يهتمون بما عدا التنفيذ في عملية تحميل وتنفيذ السكربت).
كما يُعتبر تنفيذ السكربت بشكل متزامن طريقة افتراضية لمعالجة السكربت، إلا أن بعض السكربت لا يحتاج إلى معالجة بهذه الطريقة، يمكن استخدام async خاصية لتحسين أداءها. مثال نموذجي لهذا هو سكريبت التتبع (tracking script). يمكن لهذه السكريpts إرسال سجلات زيارات المستخدم إلى المواقع لتخصيص وتوزيع الإعلانات بناءً على عادات المستخدم، أو جمع بيانات سجلات زيارات مستخدمي الموقع لتحليلها، وما إلى ذلك. هذه السكريpts تعمل بشكل مستقل، ولا تحتاج إلى التفاعل مع عناصر المستند HTML. ليس لهذه السكريpts أي معنى إرجاء عرض الصفحة لانتظار تحميلها وإرسال التقارير إلى الخادم الخاص بها.
استخدام async بعد خاصية، سيقوم المتصفح بتحميل وتنفيذ السكريبت بشكل متسلسل بينما يستمر في تحليل العناصر الأخرى في HTML (بما في ذلك عناصر script الأخرى). إذا تم استخدامه بشكل صحيح، يمكن أن يزيد من أداء التحميل بشكل كبير.
ملاحظة:الاستخدام async أحد الآثار الهامة للخاصية هو أن سكريبت الصفحة قد لا يتم تنفيذها وفقًا للترتيب المحدد لها. لذلك، إذا استخدمت سكريبت أخرى تعريف وظائف أو قيم، فلا يجب استخدامها async الخاصية.
دعم المتصفح
رقم في الجدول هو إصدار المتصفح الذي يدعم الخاصية لأول مرة.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 8.0 | 10.0 | 3.6 | 5.1 | 15.0 |
