چگونه برنامه‌های JavaScript خود را با استفاده از حلقه‌ها بهینه‌سازی کنیم؟

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 20 اردیبهشت 1398
دسته بندی ها : جاوا اسکریپت

همه برنامه‌هایی با کارایی بالا را می‌خواهند. پس در این پست، ما درباره نحوه رسیدن به این هدف یاد خواهیم گرفت.

یکی از آسان‌ترین و مورد غفلت‌ترین کارهایی که می‌توانید برای تسریع کارایی برنامه JavaScript خود انجام دهید، یادگیری نحوه صحیح نوشتن بیانیه‌های حلقه‌ای با کارایی بالا است. ایده این مقاله هم کمک به شما در این هدف است. ما انواع اصلی حلقه‌های مورد استفاده از JavaScript و نحوه نوشتن آن‌ها به روشی کارآمد را خواهیم دید.

در ابتدا جای اشاره دارد که محور این مقاله، زبان برنامه‌نویسی JavaScript بوده و یک دوره هم مربوط به این زبان بر روی راکت موجود می‌باشد.

بیایید شروع کنیم!

کارایی حلقه

وقتی که به کارایی حلقه می‌رسیم، بحث موجود همیشه درباره این است که از کدام حلقه استفاده کنیم. کدام حلقه از همه سریع‌تر و کارآمدتر است؟ واقعیت این است که در میان انواع حلقه فراهم شده توسط JavaScript، فقط یکی از آن‌ها به طرز قابل توجهی نسبت به بقیه کند است: حلقه for-in. انتخاب نوع حلقه باید بر پایه نیازمندی‌های شما باشد؛ نه نگرانی درباره کارایی.

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

حلقه For

ECMA-262 (مشخصه‌ای که سینتکس و رفتار پایه JavaScript را تعریف می‌کند) یا سومین ویرایش، چهار نوع حلقه را تعریف می‌کند. اولین استاندارد، حلقه for است که سینتکس مشابهی به مانند زبان‌های C مانند دیگر دارد:

for (var i = 0; i < 10; i++){
    //بدنه حلقه
}

این احتمالا رایج‌ترین سازش حلقه JavaScript است. برای درک این که چگونه می‌توانیم کار آن را بهینه‌سازی کنیم، باید کمی آن را تشریح کنیم.

تشریح

حلقه for از چهار بخش تشکیل می‌شود: راه‌اندازی، شرط از پیش تعیین شده، بدنه حلقه و پس اجرا. نحوه کار آن به این صورت است: اول، کد راه‌اندازی اجرا می‌شود (var i = 0;). اگر شرط از پیش تعیین شده برابر با true باشد، بدنه حلقه اجرا می‌شود. پس از آن کد پس اجرا (i++) اجرا می‌شود.

بهینه‌سازی

اولین قدم از بهینه‌سازی مقدار کار در یک حلقه، بهینه‌سازی تعداد دفعات گشتن برای آبجکت‌ها و آیتم‌های آرایه است. شما همچنین می‌توانید کارایی حلقه‌ها را با برعکس کردن ترتیب آن‌ها افزایش دهید در JavaScript اگر شما عملیات‌های اضافی را از بین ببرید، برعکس کردن یک حلقه به یک بهبود کوچک در کارایی برای حلقه‌ها ختم می‌شود. هر دوی بیانیه‌های بالا، برای دو حلقه سریع‌تر دیگر (while و do-while) هم معتبر هستند.

// حلقه اصلی
for (var i = 0; i < items.length; i++){
    process(items[i]);
}

// به حداقل رساندن گشتن به دنبال ویژگی
for (var i = 0, len = items.length; i < len; i++){
    process(items[i]);
}

// به حداقل رساندن گشتن به دنبال ویژگی و معکوس کردن
for (var i = items.length; i--; ){
    process(items[i]);
}

حلقه While

دومین نوع حلقه، حلقه while است. این یک حلقه از پیش تنظیم شده ساده، متشکل از یک شرط از پیش تعیین شده و یک بدنه حلقه است.

var i = 0;
while(i < 10){
    //بدنه حلقه
    i++;
}

تشریح

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

بهینه‌سازی

// حلقه اصلی
var j = 0;
while (j < items.length){
    process(items[j++]);
}

// به حداقل رساندن گشتن به دنبال ویژگی
var j = 0,
    count = items.length;
while (j < count){
    process(items[j++]);
}

// به حداقل رساندن گشتن به دنبال ویژگی و معکوس کردن
var j = items.length;
while (j--){
    process(items[j]);
}

حلقه Do-While

do-while سومین نوع حلقه، و تنها حلقه می‌باشد که بررسی شرط را پس از اجرای کد انجام می‌دهد. این حلقه از بدنه حلقه و یک شرط پس بررسی تشکیل می‌شود:

var i = 0;
do {
    //بدنه حلقه
} while (i++ < 10);

تشریح

در این نوع حلقه، بدنه حلقه همیشه حداقل یک بار اجرا می‌شود. سپس هم شرط پس بررسی ارزیابی شده، و اگر برابر با true باشد یک چرخه حلقه دیگر مجددا اجرا می‌شود.

بهینه‌سازی

// بدنه حلقه
var k = 0;
do {
    process(items[k++]);
} while (k < items.length);

// به حداقل رساندن گشتن به دنبال ویژگی
var k = 0,
    num = items.length;
do {
    process(items[k++]);
} while (k < num);

// به حداقل رساندن گشتن به دنبال ویژگی و معکوس کردن
var k = items.length - 1;
do {
    process(items[k]);
} while (k--);

حلقه For-In

چهارمین  و آخرین نوع حلقه، for-in نام دارد. این حلقه یک هدف بسیار خاص دارد: شمارش ویژگی‌های نامگذاری شده در هر آبجکت JavaScript. for-in به این صورت کار می‌کند:

for (var prop in object){
    //بدنه حلقه
}

تشریح

این حلقه فقط از نظر نام با حلقه for معمولی تشابه دارد. نحوه کار آن کاملا متفاوت است. و این تفاوت آن را بسیار کندتر از سه حلقه دیگر می‌نماید، که خصوصیات کارایی معادلی دارند. به قدری که تلاش برای تشخیص این که کدام یک سریع‌تر است، ارزشش را ندارد.

هر زمان که این حلقه اجرا می‌شود، متغیر prop نام یک ویژگی دیگر که یک رشته بر روی object است را دارد. این حلقه تا زمانی که تمام ویژگی‌ها برگردانده شده‌اند، اجرا خواهد شد. این‌ها، ویژگی‌های خود آبجکت، و همچنین موارد به ارث برده شده از طریق زنجیره نمونه اولیه آن خواهند بود.

نکات

شما هیچ وقت نباید از for-in برای تکرار بر روی اعضای یک آرایه استفاده کنید.

هر تکرار از طریق این حلقه، باعث یک بررسی ویژگی، چه بر روی نمونه مورد نظر و چه بر روی ویژگی می‌شود، که این مسئله هم باعث می‌شود حلقه for-in بسیار کندتر از حلقه‌های دیگر باشد. این حلقه در ازای تعداد مشابهی تکرار، می‌تواند هفت برابر کندتر از باقی حلقه‌ها باشد.

نتیجه گیری

  • حلقه‌های for، while و do-while همگی خصوصیات کارایی مشابهی دارند، و از این رو هیچ حلقه‌ای به طرز قابل توجهی نسبت به دیگری سریع‌تر یا کندتر نیست.
  • تا زمانی که مجبور نیستید بر روی تعداد زیادی از ویژگی‌های آبجکت ناشناخته تکرار کنید، از حلقه for-in خودداری کنید.
  • بهترین راه برای بهبود کارایی حلقه، کاهش مقدار کار انجام شده بر روی هر تکرار و کاهش تعداد تکرار حلقه است.

امیدوارم این مقاله برای شما کاربردی بوده باشد.

منبع

مقالات پیشنهادی

چگونه کد خود را با استفاده از عملگر گسترش، ساده‌سازی کنیم؟

اکثر مردم می‌دانند که Object، Array، Set و موارد مشابه قابل تکرار هستند. این که تمام انواع اولیه هم operandهای معتبر عملگر گسترش هستند، ما را قادر می‌...

چگونه با استفاده از کنسول JavaScript روند کاری خود را ارتقا دهیم؟

به عنوان یک توسعه دهنده وب، خوب می‌دانید که چقدر به خطایابی کد نیاز است. معمولا از کتابخانه‌های خارجی برای logها، قالب‌بندی و یا در برخی موارد نمایش آ...

چگونه از زمان سکون، برای بالا بردن نرخ تبدیلات استفاده کنیم؟

در چند سال اخیر طراحی صفحات فرود یا Landing Page به یک عرصه بسیار مهم در طراحی وبسایت تبدیل شده و تقریبا برای ساخت آن تمام موارد مورد نیاز فراهم شده ا...

با استفاده از Billboardjs.js، نمودارهای داده‌ای بر پایه JavaScript بسازید

گرافیک و ویژگی‌های بصری، نقش حیاتی‌ای در پیشرفت محتویات وب بازی می‌کنند. با فناوری وب مدرن، اضافه کردن ویژگی‌های بصری سفارشی مانند آیکون‌های SVG در صف...