شقایق وهنانی
شقایق وهنانی
خواندن ۱ دقیقه·۴ سال پیش

تفاوت صفت async و defer در فراخوانی کد های JavaScript چیست؟

کد های جاوا اسکریپت به دو صورت internal و external در صفحات وب سایت استفاده می شوند. در حالت internal کد ها داخل تگ script و ترجیحا داخل تگ head نوشته می شوند، اما در حالت external کد ها در یک فایل جاوا اسکریپت نوشته و سپس آن را با تگ script در کد html فراخونی می کنیم.

مرورگر کد های html را خط به خط اجرا می کند و در حالت عادی وقتی از تگ script در کد html استفاده می کنید، داده گرفته و اجرا می شود.

<script src="myscript.js">

صفت defer و async دو صفت برای اسکریپت کلاسیک در تگ های html هستند. با اضافه کردن این دو صفت به تگ اسکریپت می توانید رفتار مرورگر را تغییر دهید و Render_Blocking را حذف کنید.

در حالتی که از صفت async در script استفاده می کنید، مرورگر کد JavaScript و html را به صورت موازی و همزمان دریافت می کند اما پس از دانلود JavaScript اجرا می شود.

<script async src="myscript.js">

در حالت استفاده از صفت defer، مرورگر شروع به دانلود کردن فایل JavaScript می کند اما پس از دانلود کل صفحه اجرا می شود.

<script defer src="myscript.js">

از این دو ویژگی باید به درستی استفاده شود چرا در صورت استفاده نادرست از آنها ممکن است Reder_Blocking را کاهش دهد ولی استایل CSS و Bootstrap ها را بهم می ریزد.

منبع : caniuse.com

#آزادی_دانش

#انتشار_دانش

#سئولب


سئو تکنیکال
شاید از این پست‌ها خوشتان بیاید