Як оптимізувати свої програми JavaScript за допомогою циклів

Усі хочуть високопродуктивних додатків - тож у цій публікації ми дізнаємось, як досягти цієї мети.

Одне з найпростіших і найнехтуваніших речей, які ви можете зробити для підвищення продуктивності своїх додатків JavaScript, - це навчитися правильно писати високоефективні оператори циклу. Ідея цієї статті - допомогти в цьому.

Ми побачимо основні типи циклів, що використовуються в JavaScript, і те, як ми можемо писати їх ефективно.

Давайте почнемо!

Виконання циклу

Що стосується ефективності циклу, то дискусія завжди йде про те, який цикл використовувати. Що є найшвидшим та найефективнішим? Істина полягає в тому, що з чотирьох типів циклів, наданих JavaScript, лише один із них значно повільніший за інші - for-inцикл. Вибір типу циклу повинен ґрунтуватися на ваших вимогах, а не на питаннях продуктивності .

Є два основні фактори, що сприяють продуктивності циклу - робота, виконана за ітерацію, і кількість ітерацій .

У розділах нижче ми побачимо, як, зменшуючи їх, ми можемо мати позитивний загальний вплив на продуктивність циклу.

Для петлі

ECMA-262 (специфікація, яка визначає основний синтаксис та поведінку JavaScript), третє видання, визначає чотири типи циклів. Перший - це стандартний forцикл, який поділяє свій синтаксис з іншими мовами, подібними до С:

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

Це, мабуть, найбільш часто використовувана конструкція циклу JavaScript. Щоб зрозуміти, як ми можемо оптимізувати його роботу, нам потрібно трохи розібрати її.

Розтин

forЦикл складається з чотирьох частин: ініціалізація, передтестова стан, тіло циклу, і пост-виконати. Це працює наступним чином: спочатку виконується код ініціалізації (var i = 0;). Тоді умова попереднього тесту (i <10;). Якщо умова попереднього тесту обчислює to true, тоді виконується тіло циклу. Після цього виконується код після виконання (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 Loop

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.It буде виконуватися доти, доки всі властивості не будуть повернуті. Це були би властивості самого об'єкта, а також властивості, успадковані через його ланцюжок прототипів.

Примітки

Ви ніколи не повинні використовувати “ for-in”для перебору елементів масиву .

Кожна ітерація через цей цикл викликає пошук властивостей або в екземплярі, або в прототипі, що робить for-inцикл набагато повільнішим за інші цикли. За тієї ж кількості ітерацій це може бути в сім разів повільніше, ніж решта.

Висновок

  • for, whileІ do-whileпетлі всі вони мають аналогічні характеристики, і тому жоден тип контуру не працює значно швидше або повільніше , ніж інші.
  • Уникайте for-inциклу, якщо вам не потрібно переглядати ряд невідомих властивостей об’єкта.
  • Найкращі способи поліпшення продуктивності циклу - це зменшення обсягу виконаної роботи за ітерацію та зменшення кількості ітерацій циклу .

Сподіваюся, це було корисно для вас, як і для мене!

Дякуємо за читання.

Ресурси

“Високопродуктивний JavaScript” - Ніколас К. Закас

Більше моїх статей читайте на mihail-gaberov.eu.