كيفية تحسين تطبيقات JavaScript باستخدام Loops

الكل يريد تطبيقات عالية الأداء - لذا في هذا المنشور ، سنتعلم كيفية تحقيق هذا الهدف.

من أسهل الأشياء وأكثرها إهمالًا التي يمكنك القيام بها لتعزيز أداء تطبيقات JavaScript الخاصة بك هو تعلم كيفية كتابة جمل حلقة عالية الأداء بشكل صحيح. فكرة هذا المقال هي المساعدة في ذلك.

سنرى الأنواع الرئيسية للحلقة المستخدمة في JavaScript وكيف يمكننا كتابتها بطريقة فعالة.

هيا نبدأ!

أداء الحلقة

عندما يتعلق الأمر بأداء الحلقة ، فإن النقاش يدور دائمًا حول الحلقة التي يجب استخدامها. ما هو الأسرع والأكثر أداء؟ الحقيقة هي أنه ، من بين أنواع الحلقات الأربعة التي توفرها JavaScript ، يكون أحدها فقط أبطأ بكثير من الأنواع الأخرى - for-inالحلقة. يجب أن يعتمد اختيار نوع الحلقة على متطلباتك بدلاً من مخاوف الأداء .

هناك نوعان من العوامل الرئيسية التي تساهم في أداء حلقة - العمل المنجز في التكرار و عدد التكرارات .

في الأقسام أدناه ، سنرى كيف يمكننا ، من خلال تقليلها ، أن يكون لنا تأثير عام إيجابي على أداء الحلقة.

لحلقة

ECMA-262 (المواصفات التي تحدد بناء الجملة الأساسي لـ JavaScript وسلوكها) ، الإصدار الثالث ، يحدد أربعة أنواع من الحلقات. الأولى هي forالحلقة القياسية ، والتي تشترك في تركيبها مع لغات أخرى شبيهة بلغة C:

for (var i = 0; i < 10; i++){ //loop body}

من المحتمل أن يكون هذا هو بناء حلقات JavaScript الأكثر استخدامًا. لفهم كيف يمكننا تحسين عمله ، نحتاج إلى تشريحه قليلاً.

تشريح

و forتتكون حلقة من أربعة أجزاء: التهيئة، الاختبار القبلي الشرط، هيئة حلقة، وبعد تنفيذ. الطريقة التي يعمل بها هي كما يلي: أولاً ، يتم تنفيذ كود التهيئة (var i = 0 ؛). ثم شرط الاختبار الأولي (أنا <10 ؛). إذا كان شرط الاختبار المسبق يقيّم to tالسذاب ، فسيتم تنفيذ جسم الحلقة. بعد ذلك يتم تشغيل رمز ما بعد التنفيذ (i ++).

التحسينات

الخطوة الأولى في تحسين مقدار العمل في الحلقة هي تقليل عدد أعضاء الكائن وعمليات البحث عن عناصر الصفيف.

يمكنك أيضًا زيادة أداء الحلقات عن طريق عكس ترتيبها. في JavaScript ، يؤدي عكس الحلقة إلى تحسين طفيف في أداء الحلقات ، بشرط أن تستبعد العمليات الإضافية نتيجة لذلك.

كلتا العبارتين أعلاه صالحة للحلقتين الأخريين الأسرع أيضًا ( whileو do-while).

// original loop for (var i = 0; i < items.length; i++){ process(items[i]); } // minimizing property lookups for (var i = 0, len = items.length; i < len; i++){ process(items[i]); } // minimizing property lookups and reversing for (var i = items.length; i--; ){ process(items[i]); }

حائط اللوب

النوع الثاني من الحلقة هو whileالحلقة. هذه حلقة اختبار تمهيدي بسيطة ، تتكون من شرط الاختبار المسبق وجسم حلقة.

var i = 0; while(i < 10){ //loop body i++; }

تشريح

إذا تم تقييم شرط الاختبار المسبق إلى true، فسيتم تنفيذ جسم الحلقة. إذا لم يكن كذلك - تم تخطيه. whileيمكن استبدال كل حلقة forبالعكس والعكس صحيح.

التحسينات

// original loop var j = 0; while (j < items.length){ process(items[j++]); } // minimizing property lookups var j = 0, count = items.length; while (j < count){ process(items[j++]); } // minimizing property lookups and reversing var j = items.length; while (j--){ process(items[j]); }

افعل أثناء التكرار

do-whileهي النوع الثالث من الحلقة وهي الحلقة الوحيدة بعد الاختبار في JavaScript. وهي تتألف من حلقة الجسم وحالة ما بعد الاختبار:

var i = 0; do { //loop body } while (i++ < 10);

تشريح

في هذا النوع من الحلقات ، يتم تنفيذ جسم الحلقة مرة واحدة على الأقل دائمًا. ثم يتم تقييم حالة ما بعد الاختبار ، وإذا كانت كذلك true، يتم تنفيذ دورة حلقة أخرى.

التحسينات

// original loop var k = 0; do { process(items[k++]); } while (k < items.length); // minimizing property lookups var k = 0, num = items.length; do { process(items[k++]); } while (k < num); // minimizing property lookups and reversing var k = items.length - 1; do { process(items[k]); } while (k--);

في حلقة

النوع الرابع والأخير من الحلقة يسمى for-inالحلقة.له غرض خاص جدًا - يعدد الخصائص المسماة لأي كائن JavaScript. ها هو كيف يبدو:

for (var prop in object){ //loop body }

تشريح

إنها تشبه الحلقة العاديةfor فقط باسمها. الطريقة التي تعمل بها مختلفة تمامًا. وهذا الاختلاف يجعلها أبطأ بكثير من الحلقات الثلاث الأخرى ، التي لها خصائص أداء مكافئة بحيث لا يكون من المفيد محاولة تحديد الأسرع.

في كل مرة يتم فيها تنفيذ الحلقة ، يكون للمتغير propاسم خاصية أخرى ، وهي سلسلة ، object.سيتم تنفيذها حتى يتم إرجاع جميع الخصائص. ستكون هذه خصائص الكائن نفسه ، بالإضافة إلى تلك الموروثة من خلال سلسلة النموذج الأولي الخاص به.

ملاحظات

يجب ألا تستخدم أبدًا " for-in”للتكرار على أعضاء مصفوفة .

يؤدي كل تكرار عبر هذه الحلقة إلى البحث عن خاصية إما على المثيل أو في النموذج الأولي ، مما يجعل for-inالحلقة أبطأ بكثير من الحلقات الأخرى. لنفس العدد من التكرارات ، يمكن أن تكون أبطأ بسبع مرات من البقية.

استنتاج

• و for، whileو do-whileحلقات جميعا خصائص الأداء مماثلة، وذلك لا نوع حلقة واحدة بشكل ملحوظ أسرع أو أبطأ من الآخرين.
• تجنب for-inالحلقة إلا إذا كنت بحاجة إلى تكرار عدد من خصائص الكائن غير المعروفة.
• أفضل الطرق لتحسين أداء الحلقة هي تقليل مقدار العمل المنجز لكل تكرار وتقليل عدد مرات تكرار الحلقة .

آمل أن يكون هذا مفيدًا لك ، كما كان بالنسبة لي!

شكرا للقراءة.

مصادر

"JavaScript عالي الأداء" - نيكولاس سي زاكاس

اقرأ المزيد من مقالاتي في mihail-gaberov.eu.