آموزش خاصیت 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>
گرداوری و آموزش : وحید مجیدی
پخش اختصاصی
چقدر جالب، دنبال چنین چیزی بودم اتفاقا (:
خسته نباشید ..