آموزش خاصیت async و defer در تگ Script ( تاخیر در اجرای Script )

در این پست از سایت اسکریپت دات کام , یک آموزش بسیار ساده ولی کاربردی را برایتان آماده ساخته ام که امیدوارم مورد پسند شما کاربران عزیز قرار گیرد .

طبیعتا در هر وب سایتی که روزانه در دنیا طراحی میشود , احتمال خیلی کمی وجود دارد که در آن از فایل های js استفاده نشود . منطور از js , همان جاوا اسکریپت , jquery , angular و دیگر کتابخانه ها میباشد .

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

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

در ادامه قصد دارم آموزشی را ارائه دهم که با کمک آن میتوانید از این نوع اجرا در مرورگر جلوگیری به عمل آورده و بارگذاری script را به تعویق بیاندازید .

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

اما اسکریپتهای نوع defer حتی اگر به طور کامل هم لود شوند ، منتظر مانده تا کل سند HTML لود شود و بعد از آن اجرا میشوند .
وقتی که زمان اجرای یک اسکریپت اهمیتی نداشته باشد ( اکثر اوقات ) بهتره از async استفاده شود . ولی زمانی که لازمه حتماً بعد از لود شدن کامل عناصر HTML برنامه اجرا شود باید از defer استفاده کنید .

توجه : این دو خاصیت فقط برای فایل های اسکریپت External قابل استفاده است . یعنی زمانی که یک فایل مثلا به نام vms.js داریم و توسط تگ زیر به فایل HTML خود ضمیمه میکنیم .

<script async src="vms.js"></script>

<script defer src="vms.js"></script>

گرداوری و آموزش : وحید مجیدی

پخش اختصاصی