۶ نکته برای بهینه سازی پروژه های جاوا اسکریپت

بهینه سازی عملکرد کدها مهارتی عالی است که باید آن را در خود تقویت کنید. بهتر است کدی بنویسید که عملکرد فوق العاده ای را برای کاربران نهایی شما ارائه دهد. در پروژه های شما، ممکن است مواردی وجود داشته باشد که بتوانید آنها را بهبود بخشید.

برای جلوگیری از تجربه بد کاربری، باید آنها را برطرف کنید. ابزارها و رویکردهایی برای اندازه گیری و تجزیه و تحلیل عملکرد و نحوه رفتار برنامه شما وجود دارد. با این حال، در این مقاله، ایده های بهینه سازی بالقوه را برای بهبود عملکرد کدهای جاوا اسکریپت به شما نشان میدهیم.

دو نوع بهینه سازی

دو دسته اصلی اصطلاح عملکرد و بهینه سازی را شرح می دهند: عملکرد زمان راه اندازی و عملکرد زمان اجرا.

• عملکرد زمان راه اندازی: این یکی در مورد چگونگی تعامل سریع کاربر با صفحه وب و مشاهده چیزی روی صفحه است. هر روز از یک صفحه وب دیدن می کنید. وقتی با یک صفحه وب مواجه می شوید که کند است، چه احساسی دارد: زمان زیادی طول می کشد تا صفحه بارگیری شود، به نظر می رسد که صفحه در حال بارگیری است، اما وقتی روی جایی کلیک می کنید هیچ اتفاقی نمی افتد. این موضوع مایوس کننده است. بنابراین، عملکرد زمان راه اندازی بخش مهمی برای بهینه سازی است.
• عملکرد زمان اجرا: پس از بارگذاری صفحه، صفحه وب نیز باید عملکرد بسیار خوبی داشته باشد و برای داشتن کد بهینه شده باید از خطاها خودداری کنید. عملکرد زمان اجرا در مورد نرمی نحوه عملکرد یک برنامه است و از کاربران در برابر یخ زدگی و تأخیر محافظت می کند. به عنوان مثال، اگر بر روی دکمه ای کلیک کنید ، برخی از انیمیشن ها در صفحه وب وجود دارند، باید بدون مشکل پخش شوند.

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

۱٫ اندازه اسکریپت

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

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

۲٫ درخواست های HTTP

هنگامی که تعداد درخواست های رفت و برگشت های HTTP افزایش می یابد، اجرای اولیه را به تأخیر می اندازد. اگر با فایلهای اسکریپت زیادی کار می کنید، مرورگر باید همه فایلها را بارگیری کند تا صفحه شما کار کند. هر درخواست HTTP که برای بارگیری چیزی ارسال می کنید هزینه دارد.

بنابراین اینجا قسمتی است که می خواهید آن را بهینه سازی کنید. در صورت امکان، بهتر است فایل ها را قبل از دانلود یکی کرده و یک درخواست را ارسال کنید. برای بهینه سازی این موارد میتوانید از Webpack استفاده کنید.

۳٫ دسترسی به DOM

می توانید دسترسی DOM را بهینه سازی کنید. شما باید از اجرای غیر ضروری کدها اجتناب کنید، بنابراین بهتر است از عملیات بیش از حد DOM اجتناب کنید.به عنوان مثال ، اگر عناصر زیادی را بی دلیل روی صفحه نمایش دهید، عملکرد را تحت تأثیر قرار می دهید، زیرا DOM از نظر عملکرد کد شما هزینه بر است.

همچنین ، هنگام کار با DOM نباید عناصر HTML را از طریق JavaScript اضافه یا حذف کنید. این موضوع ممکن است عملکرد وب سایت شما را کاهش دهد. بنابراین، اگر می خواهید عملکرد صفحه وب خود را بهینه کنید، باید از آن اجتناب کرد.

۴٫ نشت حافظه

ممکن است برخی نشتی های حافظه را تشخیص ندهید. با این حال، اگر نشت حافظه شما بیشتر باشد، منجر به کندتر شدن صفحه شما می شود و می توانند برنامه شما را در بدترین سناریو به شکست بکشاند. رایج ترین نشت های جاوا اسکریپت عبارتند از  time listener ها، event listener ها، observe ها و نگهداری منابع DOM.

۵٫ کدهای جایگزین با عملکرد بهتر

در برخی موارد، ممکن است جایگزین های کد بهتری از نظر عملکرد در جاوا اسکریپت وجود داشته باشد. به عنوان مثال، در حالی که یک آرایه را پیمایش میکنید، به طور کلی چند روش مختلف برای انجام آن دارید. بلوک کد زیر را در نظر بگیرید:

for(var i = 0; i 

می توانید کد بالا را به صورت زیر تغییر دهید:

var len = arr.length;
for(var i = 0; i 

اگر این کار را انجام دهید، برنامه شما نیازی به محاسبه array.length برای هر دور پیمایش ندارد.

۶٫ بهینه سازی کوچک

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

اگر دیگر به حافظه نیاز ندارید ، باید آن را آزاد کنید. به عنوان مثال ، می توانید اقدامات زیر را انجام دهید:

var x = 100;
x++;

همچنین، می توانید از متغیر x در جایی از کد خود استفاده کنید، اما دیگر به آن نیاز ندارید. به جای انجام این کار در بالا ، می توانید از تابعی مانند زیر استفاده کنید:

function increment() {
  var x = 100;
  x++;
  return x;
}

در صورت استفاده از این تابع، حافظه اختصاص داده شده برای x پس از استفاده آزاد می شود. همچنین برای سایر توابع معتبر است زیرا آنها حافظه اختصاص داده شده را آزاد می کنند.

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