رفع خطای Defer parsing of JavaScript در gtmetrix

جاوا اسکریپت نوعی زبان برنامه‌نویسی است که در درون کدهای HTML قرار میگیرد که اصطلاحا به آن کدهای چندالگویی نیز گفته می‌شود. جاوا اسکریپت توانسته به عنوان یکی از فناوری‌های هسته‌ای در جهان شناخته شود. ولی متاسفانه به دلایلی که در ادامه به آن خواهیم پرداخت؛ جاوااسکریپت یکی از دلایلیست که باعث کاهش سرعت سایت می شود. در این مقاله به بررسی رفع خطای Defer parsing of JavaScript در gtmetrix خواهیم پرداخت. با tik4 همراه باشید.

بررسی اجمالی به تعویق انداختن بارگذاری جاوا اسکریپت

همانطور که در سایر مقالات هم به کررات به این موضوع اشاره شد؛ به هنگام بازدید از یک سایت، مرمرگر تمامی محتویات صفحه اعم از تمامی عکس ها و متن ها و .. را بارگیری می کند. این امر باعث کاهش سرعت سایت خواهد شد.

یکی از دلایل اصلی این امر؛ استفاده از  کدهای جاوا اسکریپت در سایت است که باعث کندی سرعت سایت می شود. زیرا که مرورگر به محض ورود به سایت؛ بایستی تمامی کدهای جاوااسکریپت را فراخوانی کند تا سایت به نمایش در بیاید.

در نظر داشته باشید؛ فراخوانی کدهای جاوااسکریپت برای هر صفحه به طور جداگانه انجام خواهد گرفت. و شما وظیفه دارید برای هر صفحه به صورت مجزا تمامی کدهای جاوااسکریپت را به مست پایین سایت هدایت کنید تا زمان کمتری برای لود سایت مصرف شود.

جزئیات بیشتر در مورد به تعویق انداختن بارگذاری جاوا اسکریپت

در ادامه به بررسی چندین روش می پردازیم تا زمان بارگیری جاوااسکریپت را به تاخیر بیندازیم. با ما همراه باشید.

روش اول قرار دادن فایل ها یjs در فوتر

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

اینگونه توابع در شروع بارگیری صفحه، قرار ندارند. به بیانی دیگر؛ سعی می کنیم توابعی که با نام Script نوشته می شوند را به بخش هایی به جز head سایت انتقال دهیم. با این کار سرعت بارگیری سایت را به شدت کاهش داده ایم و علاوه بر آن کدهای دیگر به جای کد java بارگیری شده اند و سرعت سایت به شدت زیاد شده است.

روش دوم بر  ویژگی های defer و  async

استفاده از دو اتربیوت defer و async در کدهای JS باعث برطرف کردن خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس خواهد شد. وقتی از این دو اتربیوت استفاده کنید به مرورگر میگید که منتظر لود شدن کامل فایل‌های جاوا اسکریپت نمونه و همزمان با اینکه داره فایل JS رو لود میکنه سایر فایل‌ها و صفحه HTML رو هم لود بکنه که در این حالت مشکلی از نظر لود صفحه وجود نخواهد داشت. این دو نوع اتربیوت تفاوتی که با هم دارند در این هست که اگر از حالت defer استفاده کنید، مرورگر منتظر میمونه تا صفحه HTML هم لود بشه و بعد شروع به اجرای فایل JS بکنه اما در صورتی که از حالت async استفاده کنید، به محض لود کامل فایل شروع به اجرا شدن میکنه و دیگه منتظر نمیمونه که بعد از لود کامل صفحه HTML اجرا بشه. در نتیجه بهتره که از گزینه async استفاده کنید.

یکی از دیگر از روش ها برای رفع خطای Defer parsing of JavaScript و  کاهش سرعت بارگیری سرعت سایت، استفاده از 2 اتربیوت است به نام های defer  و async.

با درج این دو اتربیوت به مرورگر می گویید که در ابتدا نیازی نیست که تمامی کدهای جاوااسکریپت را فراخوانی کند؛ بلکه می تواند به طور همزمان سایر کدهای html را لود کند تا از سرعت سایت کم کنیم.

تنها  تفاوتی که این دو نوع از کدها با یکدیگر دارند در این است که؛ اگر از اتربیوت defer  استفاده کنیم، مرورگر پس از لود تمامی کدهایhtml به سراغ کدهای جاوااسکریپت رفته و آن ها را لود میکند ولی اگر از اتربیوت async استفاده کنیم پس از بارگذاری کدهای html دیگر،  منتظر بارگیری سایر کدهای JS  نخواهد ماند.

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

بررسی کدهای  جاوااسکریپت در موبایل، این امکان را فراهم میدارد که در هنگامی که کاربرآفلاین است این کدها را فراخوانی کند. یکی از روش ها مرسوم استفاده از string literal می باشد.

به این منظور؛ در هنگام استفاده از این تکنیک جاوا حافظه کمتری را نسبت به قبل اشغال می کند. زیرا که آبجکت ایجاد شده از قبل در قسمتی با نام  string constant poolجایگذاری شده است و همین امر باعث می شود که جاوا مجددا فایلی به این  نام را ایجاد  نکند.

یکی از روش های ذخیره کردن کد، ساخت آبجکت string  ولی به روش string literal است. در این روش برنامه نویس پس از تعریف کردن آبجکتی به نام string ، مرورگر بررسی می کند که آیا این آبجکت از قبل در string constant pool قرار داشته باشد. اگر این نوع از آبجکت موجود نباشد؛ یک نمونه جدیدی از string در string constant pool درج خواهد شد.

طی بررسی هایی که در سال 2011 انجام شد دریافتیم؛ هر 1kb جاوااسکریپت در گوشی های موبایل زمانی حدود 1ms را اشغال خواهد کرد. و اگر حداقل 100kb جاوااسکریپت در صفحه موجود باشد یعنی 200 ms سرعت صفحه کاهش خواهد داشت.