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

تفاوت async و defer کردن جاوا اسکریپت


به طور معمول در تمامی وب سایت‌هایی که در دنیا طراحی می‌شود، از Javascript استفاده می‌شود یا سایت‌های بسیار کمی را می‌توان یافت که از Javascript استفاده نمی‌کنند.جاوا اسکریپت ها معمولا فایلهای سنگین تر و با حجم بیشتری نسبت به سایر فایل ها هستند و به علاوه چون ساختار جاوا اسکریپت ها اجرای یک عملکرد یا برنامه در مرورگر است باعث میشوند تا سایت کند تر عمل کند و از سرعت بارگذاری آن کاسته شود .

برای اضافه کردن یک فایل Javascript به Html از تگ استفاده می‌شود. که هم به صورت internal و هم به صورت external می‌توان اضافه کرد.این عملیات می‌تواند تاثیر زیادی در زمان بارگیری صفحه داشته باشد.

میتوان تگ Javascript را در قسمت head قرار داد اما باید توجه کرد که مرورگر پس از رسیدن به تگ ابتدا اسکریپت ها را دانلود کرده و سپس ادامه فایل html را لود می‌کند.

<script src="script.js">

و این اصلا خوب نیست زیرا زمان زیادی این بین تلف می شود. یک راه‌حل بسیار رایج برای این مساله این است که تگ اسکریپت را به جای بالای صفحه در پایین صفحه قرار دهید،قبل از بسته شدن تگ<body/>

با انجام این کار، زمان لود و سرعت صفحه بسیار افزایش میابد و همچنین میتوان با اضافه کردن defer یا async به تگ مروگر پس از رسیدن به فایل اسکریپت منتظر دانلود فایل اسکریپت نمی‌ماند و ادامه فایل‌های HTML را لود می‌کند.

با قرار دادن مقدار defer در تگ آغازین این دستور به مرورگر داده میشود تا فایل js را بعد از فایل های دیگر بارگذاری کند و پس از لود کامل صفحه اجرا می‌شوند.

<script src="script.js" defer>

این حالت تقریبا مثل زمانی است که اسکریپت را در انتهای صفحه لود می کردیم ولی چون اینجا اسکریپت از قبل دریافت شده است و فقط اجرایش باقی مانده، بهینه تر است.

و اما اسکریپت‌هایی که به صورت async باشند پس دانلود شدن کامل اسکریپت اجرا می‌شوند.

<script src="script.js" async>

به نظر می رسد بهترین روش استفاده از defer است زیرا فرایند اجرای html را متوقف نمیکند و به نظر انتخاب بهتری نسبت به async است.

آزادی دانشasync
شاید از این پست‌ها خوشتان بیاید