آیا محل قرار گیری لینک جاوا اسکریپت مهمه؟ اگه آره چه تفاوت هایی داره
سوال جدیدسلام، همونطور که توی عنوان نوشتم، میخوام بدونم آیا لینک کردن فایل *.js به فایلمون توی تگ head با اینکه اون رو آخر تگ body اضافه کنیم باهم فرق میکنن؟
و دیگه اینکه حالا اگه ما چندتا فایل js داشتیم، ترتیب قرارگیری اون ها مهمه؟ مثلا همین بوت استرپ که ۲ تا فایل js داره مهمه ترتیب قرارگیریشون و یا مکان قرارگیری شون؟
ممنون
سلام
بله فرق میکنه.
تفسیر یه صفحه html در مرورگر از بالا به پایین و به صورت خط به خط اتفاق میفته.
فرض کنیم لینک فایل script در تگ head قرار داره، وقتی که مرورگر به این خط میرسه درخواست لود شدن اون فایل رو میفرسته و صبر میکنه تا جواب درخواست برگرده، وقتی که جواب درخواست برگشت و فایل دانلود شد اون فایل رو باز میکنه و کدهای داخلش رو اجرا میکنه و وقتی که تمام کد رو اجرا کرد تازه میره سراغ ادامه‌ی html.
پس اگر فایل script در انتهای body باشه، بارگذاری صفحه زودتر اتفاق میفته چون که مرورگر معطل دانلود و اجرای scriptها نمیشه.
البته همیشه قرار دادنscriptها درانتهای body بهترین راه‌کار نیست و این مورد بستگی به پروژه و اهمیت کدهای اون script داره.
پس برای ترتیبشون هم معلوم شد که مهمه. چرا؟
چون برای مثال کدهای جاوااسکریپت bootstrap نیاز به کدهای jquery دارند و اگر در فایل html قبل از فراخوانی اسکریپت‌های bootstrap، فایل jquery رو فراخوانی نکرده باشیم، کدهای bootstrap که میخواد اجرا شه jquery هنوز در دسترسش نیست، پس نمیتونه به درستی اجرا بشه.
اما کمی راجع به async و defer
این‌ها دو ویژگی هستند که میتونند به تگ script داده بشند و هر کدومشون یه کاربردی دارند.
بدون async بدون defer
در این حالت همونطور که گفتیم مرورگر برای دانلود و اجرای script متوقف میشه و اصطلاحا block rendering پیش میاد.
با async
در این حالت وقتی مرورگر به فایل script برسه، درخواست دانلودش رو ارسال میکنه ولی منتظر نمیمونه و میره سراغ ادامه‌ی html تا موقعی که جواب درخواست برسه و به محض این که فایل دانلود شد دست نگه میداره و شروع میکنه به اجرای کدهای script و وقتی که تموم کدها رو اجرا کرد میره سراغ ادامه html.
با defer
در این حالت وقتی مرورگر به فایل script برسه، درخواست دانلودش رو ارسال میکنه ولی منتظر نمیمونه و میره سراغ ادامه‌ی html تا موقعی که خوندن سند html رو به آخر برسونه اون وقت فایل script دانلود شده رو اجرا میکنه.
با async با defer
طبق این منبع، کاربرد این حالت برای موقعیه که مرورگر کاربر قدیمیه و فقط از defer پشتیبانی میکنه و با اختصاص دادن هر دو ویژگی به تگ script، میشه مطمئن شد که اگه مرورگر کاربر نتونست این فایل رو به صورت async پردازش کنه، لااقل به صورت defer این کار رو انجام بده.
موفق باشید 😉
جای نوشتن تگ اسکریپت خیلی مهم است. علاوه به چیزی که دوستمون گفت (مبنی بر دیر لود شدن صفحه که البته کاملاً درست است) شما در خود تگ اسکریپت بدون نوشتن توابع مختلف باید بتوانید کار های مختلفی را انجام دهید که انتظار دارید هنگام لود شدن صفحه به طور خودکار آنها نیز لود بشوند.
شما اگر در تگ هد این ها را بنویسید قبل از درست شدن المنت ها دارید روی آنها تغییراتی میدهید که این به تبع ممکن نیست و از طرف مرورگر در کنسول جاوااسکریپت به شما ارور ارسال خواهد کرد. پس بهترین جای نوشتن JS و تبعاً تگ script در پایین ترین نقطه تگ body می باشد.
