یکی از بزرگترین مشکلات برنامه نویسی با Javascript این است که با سنگین شدن کد، فرآیند Load آن با تاخیر قابل توجهی اتفاق میافتد و Buffer زیادی را از حافظه اشغال میکند. در نتیجه استفاده از این کدها در پروژه سایت، ممکن است دردسرساز باشد. در این مقاله قصد داریم برای بهینه سازی کدهای جاوااسکریپت و مقابله با این مشکل، چند راهکار رائه بدهیم.
بهتر است برای تعریف متغیر دیگر از کلمه کلیدی var استفاده نکنید و در عوض let و const را به کار ببرید. وقتی متغیری را با کلیدواژه let ایجاد کنید میتوانید به آن متغیر یک مقدار جدید نسبت دهید ولی مقدار متغیری که با (Constant(const تعریف شود، ثابت است. ضمنا این متغیرها scope block هستند، یعنی اگر آنها را در {} تعریف کنید، مقدارشان در داخل و خارج {} متفاوت است و این امکان ، شما را از تعریف متغیرهای بیش از حد بی نیاز میکند و میتوانید با استفاده از یک متغیر مقادیر متفاوتی را تعریف کنید. البته در هر صورت اگر در پروژه ها نیاز به ذخیره سازی فضا دارید بهتر است از تعریف چند بعدی آرایه استفاده کنید.برای بهینه سازی کدهای جاوااسکریپت تا جایی که ممکن است متغیر کمتری به کار ببرید زیرا متغیرها فضای بیشتری از حافظه را اشغال میکنند.
بهتر است تا جایی که میتوانید از Function-Arrow ها استفاده کنید. البته این به معنای حذف Function نیست زیرا این امر غیرممکن است و برخی از متد ها توسط Function-Arrow ها ساپورت نمیشوند مانند متد setInterval ،ولی در ساختار ES6 توابع Arrow جایگاه ویژگی ای دارند.
همانطور که میدانید JavaScript یک زبان oriented object است. پس بهتر است سعی کنید برای ذخیره سازی متغیر از object هم استفاده کنید. مثال اگر قرار باشد برای محاسبه BMI اشخاص کدی بنویسید، برای دریافت اطلاعاتی مانند قد و وزن و … این شیوه کارآمد است.
برای Minify کردن کدهایتان کافی است عبارت Minifier JS را در گوگل سرچ و کدهای JS خود را در یکی از سایت هایی که پیدا کرده اید آپلود کنید. فرآیند Minify کردن با حذف space و enter های موجود در کد، آن را فشرده و کم حجم میکند. ضمنا با اعمال برخی تغییرات، باعث بهینه سازی کد میشود.
منظور از این مورد، استفاده بیش از حد و نابجا از event ها است. مثال زمان استفاده از رویداد mousemove یا دستور scrollTop اگر جوری کدنویسی کنیم که تمام دستورات ضروری و غیرضروری ما با هر اسکرول یا حرکت موس تکرار شوند، باعث اشغال حافظه و افت سرعت چشمگیری میشود.
اولین نکته در این رابطه، عدم ایجاد حلقه نامتناهی (loop infinite )است. و نکته دیگر این است که داخل حلقه ها کدهای غیرضروری و ناکارآمد قرار ندهید. مثال فرض کنید که در یک فرم میخواهید value وارد شده در Input ها را دریافت کنید، اگر این دستور را در حلقه قرار دهید، در هر مرحله اجرای کد، value بی جهت دریافت میشود؛ در حالی که باید جوری کدنویسی کنید که value یک بار دریافت شود و در حلقه فقط مقادیر بررسی شوند.
اکمااسکریپت شامل قوانین، دستورالعملها و جزئیاتی است که یک زبان اسکریپت نویسی باید آنها را رعایت کند. بهتر است سعی کنید ساختارها و قواعد جدید اکما را به کار ببرید.
استفاده بیش از حد از Framework و Library های جاوااسکریپت، باعث افت سرعت میشود. مثال Plugin های jQuery علاوه بر این که کد شما را سنگین و حجیم میکنند، گاهی باعث ایجاد ناامنی نیز میشوند. بنابراین حتی بهتر است در پروژه های سطح بالا از Selector های jQuery استفاده نکنید و مدل های DOM جاوااسکریپت را به کار ببرید. ضمنا اگر بتوانید در پروژه خود از Framework های تراز اول و محبوب دنیا، مانند React ،Angular و Vue استفاده کنید، نتیجه بهتری خواهید گرفت.
فرض کنید میخواهید در کدتان getElementById.document را به کار ببرید. در این صورت بهتر است جهت پرهیز از تکرار بی مورد، این مقدار را در یک متغیر مانند x بریزید و در ادامه از همین متغیر استفاده کنید. مانند animate.x ، style.x و …
۱۱ -استفاده از Function Callback ها: اگر بتوانید از Function Callback ها درست و منظم استفاده کنید، به بهینه سازی کد شما کمک خواهد کرد!
۱۲ -استفاده از Library Animation ها: از آنجایی که به کار بردن انیمیشن در جاوااسکریپت کمی دشوار و دردسرساز است، میتوانید برای سهولت کار از کتابخانه های مختص انیمیشن استفاده کنید. مانند js.anime
امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.
من، پارسا قربانیان موسس مدرسه اینترنتی پرنیان و برگزارکننده اولین دوره های آموزشی تضمین استخدام در ایران هستم. هدف من ایجاد یک معادله برد، برد هست. میخواهیم آرزوهایمان را با هم بسازیم♥
