Како оптимизирати ЈаваСцрипт апликације помоћу Лоопс-а

Сви желе апликације високих перформанси - па ћемо у овом посту научити како да постигнемо тај циљ.

Једна од најлакших и најзанемаренијих ствари које можете учинити да побољшате перформансе својих ЈаваСцрипт апликација је научити како правилно писати петље са високим перформансама. Идеја овог чланка је да помогне у томе.

Видећемо главне типове петље који се користе у ЈаваСцрипт-у и како их можемо написати на ефикасан начин.

Почнимо!

Извођење петље

Што се тиче перформанси петље, расправа се увек води око тога коју петљу користити. Који је најбржи и најучинковитији? Истина је да је од четири врсте петљи које пружа ЈаваСцрипт, само једна од њих знатно спорија од осталих - for-inпетља. Избор врсте петље треба да се заснива на вашим захтевима, а не на забринутостима у погледу перформанси .

Два су главна фактора која доприносе извођењу петље - рад по итерацији и број итерација .

У одељцима испод видећемо како, смањењем истих, можемо имати позитиван укупан утицај на перформансе петље.

Фор Лооп

ЕЦМА-262 (спецификација која дефинише основну синтаксу и понашање ЈаваСцрипт-а), треће издање, дефинише четири врсте петљи. Прва је стандардна forпетља која своју синтаксу дели са другим језицима сличним Ц-у:

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

Ово је вероватно најчешће коришћена ЈаваСцрипт конструкција петље. Да бисмо разумели како можемо оптимизовати његов рад, морамо га мало сецирати.

Сецирање

forПетља се састоји од четири дела: иницијализација, претест стању, петља тела, и пост-извршити. Начин рада је следећи: прво се извршава иницијализациони код (вар и = 0;). Тада је услов предтеста (и <10;). Ако услов предтеста процењује to tруе, тада се извршава тело петље. Након тога се покреће пост-извршни код (и ++).

Оптимизације

Први корак у оптимизацији обима посла у петљи је минимизирање броја чланова објекта и претраживања ставки низа.

Такође можете повећати перформансе петљи тако што ћете обрнути њихов редослед. У ЈаваСцрипт-у, обртање петље резултира малим побољшањем перформанси петљи, под условом да као резултат елиминишете додатне операције.

Обе горе наведене изјаве важе и за друге две брже петље ( 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је трећа врста петље и то је једина петља након теста у ЈаваСцрипт-у. Састоји се од телесне петље и стања након теста:

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петља.Има врло посебну намену - набраја именована својства било ког ЈаваСцрипт објекта. Ево како то изгледа:

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

Сецирање

Сличан је регуларнојfor петљи само по имену. Начин рада је потпуно другачији. А ова разлика чини га много споријим од остале три петље, које имају еквивалентне карактеристике перформанси, тако да није корисно покушавати утврдити која је најбржа.

Сваки пут када се петља изврши, променљива propима име другог својства, а то је низ , на object.Он ће се извршавати све док се сва својства не врате. То би била својства самог објекта, као и својства наслеђена кроз његов прототипни ланац.

Напомене

Никада не би требало да користите „ for-in”за превлачење чланова низа .

Свака итерација кроз ову петљу узрокује тражење својства било на инстанци или на прототипу, што чини for-inпетљу много споријом од осталих петљи. За исти број итерација могао би бити и седам пута спорији од осталих.

Закључак

  • for, whileИ do-whileпетље сви имају сличне карактеристике перформансе, па нико тип петља је знатно брже или спорије од осталих.
  • Избегавајте for-inпетљу осим ако не требате да поновите низ непознатих својстава објекта.
  • Најбољи начини за побољшање перформанси петље су смањење количине посла урађеног по итерацији и смањење броја итерација петље .

Надам се да је ово било корисно за вас, као и за мене!

Хвала за читање.

Ресурси

„ЈаваСцрипт високих перформанси“ - Ницхолас Ц. Закас

Прочитајте више мојих чланака на михаил-габеров.еу.