با هنگام لود کردن یک فایل جاوا اسکریپت بر روی صفحه HTML، باید مراقب باشید که به عملکرد بارگیری صفحه آسیب نرسانید. بسته به اینکه کجا و چطور متن خود را به یک صفحه HTML اضافه می‌کنید، لود کردن یک اسکریپت بر زمان بارگذاری کل صفحه تاثیر خواهد گذاشت.
هنگام لود کردن یک اسکریپت بر روی صفحه HTML، باید مراقب باشید که به عملکرد بارگیری صفحه آسیب نرسانید.
یک فایل جاوااسکریپت به طور معمول به این روش در صفحه لود می شود:
<script src="script.js"></script>
هر زمان که یک مفسر HTML (منظور از مفسر یا تجزیه گر همان مرورگر مثل کروم یا فایرفاکس است) این خط را پیدا می‌کند، درخواست برای واکشی اسکریپت داده می‌شود، و اسکریپت به اجرا درمی آید.
هنگامی که این فرآیند انجام شد، تفسیر صفحه می‌تواند ازسر گرفته شود و بقیه HTML را می توان تحلیل کرد.
همانطور که می‌توانید تصور کنید، این عملیات می‌تواند تاثیر زیادی در زمان بارگیری صفحه داشته باشد.
اگر لود اسکریپت کمی طولانی‌تر از حد انتظار باشد، برای مثال اگر سرعت اینترنت کمی کند باشد یا اگر در یک دستگاه تلفن همراه هستید و اتصال کمی کند است، بازدید کننده به احتمال زیاد یک صفحه خالی را تا زمانی که اسکریپت کاملا لود و اجرا شود، خواهد دید.
جای قرارگیری مهم است
وقتی در حال یادگیری HTML هستید معمولا گفته می شود تگ اسکریپت را در بخش <head> صفحه قرار دهید:
<html> <head> <title>Title</title> <script src="script.js"></script> </head> <body> ... </body> </html>
همانطور که قبلا گفتم، زمانی که تجزیه‌گر یا مفسر این خط را پیدا می‌کند، آن را لود کرده و اجرا می‌کند. سپس، بعد از اینکه این کار انجام شد، به تجزیه ادامه صفحه می پردازد.
این بد است چون زمان زیادی این بین تلف می شود. یک راه‌حل بسیار رایج برای این مساله این است که تگ اسکریپت را به جای بالای صفحه در پایین صفحه قرار دهید، درست قبل از بسته شدن برچسب </body>.
با انجام این کار، لود و اجرای اسکریپت، بعد از این که همه صفحه بارگیری و تفسیر شد، انجام می‌شود، که یک بهبود عظیم در سرعت صفحه ایجاد می کند.
این بهترین کاری است که می‌توانید انجام دهید،در صورتی که لازم است از مرورگرهای قدیمی‌تر پشتیبانی نیز کنید که از دو ویژگی نسبتا جدید HTML پشتیبانی نمی‌کنند: async و defer.
Async و Defer
هر دو async و defer ویژگی‌های بولی هستند. کاربرد آنها هم مشابه است:
<script async src="script.js"></script>
<script defer src="script.js"></script>
اگر شما هر دو ویژگی را مشخص کنید، async در مرورگرهای مدرن اولویت دارد در حالی که مرورگرهای قدیمی از defer پشتیبانی می کنند.
این ویژگی ها وقتی موثر هستند که در بخش head استفاده شوند والا اگر طبق چیزی که در بالا گفته شد در آخر صفحه از آنها استفاده کنید تاثیری ندارند.
مقایسه کارایی
بدون استفاده از defer یا async، در head
اینجا می بینید چگونه یک اسکریپت بدون async و defer وقتی در بخش head صفحه قرار دارد، لود می شود:
عمل تفسیر صفحه متوقف شده است تا زمانی که اسکریپت دریافت شود. سپس تفسیر صفحه ادامه پیدا می کند.
بدون استفاده از defer یا async، در body
اینجا می بینید چگونه یک اسکریپت بدون async و defer وقتی در بخش انتهایی body قرار دارد، لود می شود:
تفسیر صفحه بدون وقفه انجام می شود. سپس اسکریپت دریافت و اجرا می شود. یعنی تفسیر صفحه قبل از اینکه حتی اسکریپت دریافت شود به اتمام رسیده است. بنابراین کاربر می تواند خود صفحه را قبل از اسکریپت ببیند بر عکس روش قبلی.
با استفاده از async، در head
اینجا می بینید چگونه یک اسکریپت با ویژگی async وقتی در بخش head قرار دارد، لود می شود:
اسکریپت موازی با صفحه دریافت می شود و هر موقع دریافت شد تفسیر HTML صفحه متوقف می شود تا اجرای اسکریپت انجام شود، سپس دوباره تفسیر صفحه ادامه می یابد.
با استفاده از defer، در head
اینجا می بینید چگونه یک اسکریپت با ویژگی defer وقتی در بخش head قرار دارد، لود می شود:
اسکریپت موازی با صفحه دریافت می شود ولی هنگامی اجرا می شود که تفسیر صفحه کاملا انجام شده باشد.
این حالت تقریبا مثل زمانی است که اسکریپت را در انتهای صفحه لود می کردیم ولی چون اینجا اسکریپت از قبل دریافت شده است و فقط اجرایش باقی مانده، بهینه تر است.
بنابراین راه حل برنده ما در زمینه سرعت این گزینه است 🏆
توقف تفسیر صفحه
async تفسیر صفحه را متوقف می کند در حالی که defer این کار را نمی کند.
domInteractive
اسکریپت با ویژگی defer درست بعد از رویداد domInteractive اجرا می شود، که بعد از لود کامل HTML صفحه اتفاق می افتد.
CSS و تصاویر در این زمان هنوز در حال لود و تفسیر هستند.
وقتی این هم انجام شد، مرورگر رویداد domComplete و سپس onLoad را اعلام می کند.
domInteractive خیلی مهم است زیرا زمان بندی ان معیار مهمی برای اندازه گیری سرعت صفحه است.
خلاصه کن و بهترین راه حل رو بهم بگو
چشم. بهترین روش برای افزایش سرعت لود صفحه وقتی از اسکریپت ها استفاده می کنی، قرار دادن اسکریپت ها در بخش head و اضافه کردن ویژگی defer به تگ script هست:
<head> <script defer src="script.js"></script> </head>
این تنها سناریو هست که رویداد domInteractive را سریع تر صدا می زند.
با در نظر گرفتن مزایا defer، به نظر می‌رسد انتخاب بهتری نسبت به async در انواع سناریوهای مختلف باشد.
