Kako optimizirati JavaScript aplikacije pomoću petlje

Programiranje

Svi žele aplikacije visokih performansi - pa ćemo u ovom postu naučiti kako postići taj cilj.

Jedna od najlakših i najzanemarivanijih stvari koje možete učiniti kako biste poboljšali izvedbu svojih JavaScript aplikacija je naučiti kako pravilno pisati izjave petlje visokih performansi. Ideja ovog članka je pomoći u tome.

Vidjet ćemo glavne vrste petlje koje se koriste u JavaScript-u i kako ih možemo zapisati na učinkovit način.

Započnimo!

Izvedba petlje

Što se tiče izvedbe petlje, rasprava je uvijek oko toga koju petlju koristiti. Koji je najbrži i najučinkovitiji? Istina je da je od četiri vrste petlji koje pruža JavaScript, samo jedna od njih znatno sporija od ostalih for-inpetlji. Izbor vrste petlje trebao bi se temeljiti na vašim zahtjevima, a ne na zabrinutostima glede izvedbe .

Dva su glavna čimbenika koji doprinose izvedbi petlje - rad po iteraciji i broj iteracija .

U odjeljcima u nastavku vidjet ćemo kako, smanjenjem istih, možemo imati pozitivan ukupni utjecaj na izvedbu petlje.

Za Loop

ECMA-262 (specifikacija koja definira osnovnu sintaksu i ponašanje JavaScript-a), treće izdanje, definira četiri vrste petlji. Prva je standardna forpetlja koja svoju sintaksu dijeli s drugim jezicima sličnim C-u:

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

Ovo je vjerojatno najčešće korištena konstrukcija petlje JavaScript. Da bismo razumjeli kako možemo optimizirati njegov rad, moramo ga malo secirati.

Disekcija

forPetlja se sastoji od četiri dijela: inicijalizaciju, pred- stanje, tjelesnu petlja, i post-izvršiti. Način rada je sljedeći: prvo se izvršava inicijalizacijski kod (var i = 0;). Tada je uvjet predtesta (i <10;). Ako uvjet predtesta procjenjuje to true, tada se izvršava tijelo petlje. Nakon toga se pokreće post-izvršni kôd (i ++).

Optimizacije

Prvi korak u optimizaciji količine posla u petlji je minimiziranje broja članova objekta i pretraživanja stavki niza.

Također možete povećati izvedbu petlji obrnuvši njihov redoslijed. U JavaScriptu, obrtanje petlje rezultira malim poboljšanjem performansi petlji, pod uvjetom da kao rezultat eliminirate dodatne operacije.

Obje gornje izjave vrijede i za druge dvije brže petlje ( whilei 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]); }

Dok je Petlja

Druga vrsta petlje je whilepetlja. Ovo je jednostavna petlja predtesta, koja se sastoji od uvjeta predtesta i tijela petlje.

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

Disekcija

Ako uvjet pretprovjere procijeni na true, izvršava se tijelo petlje. Ako ne - preskače se. Svaka se whilepetlja može zamijeniti fori obrnuto.

Optimizacije

// 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-whileje treća vrsta petlje i to je jedina petlja nakon testiranja u JavaScript-u. Sastoji se od tjelesne petlje i stanja nakon testiranja:

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

Disekcija

U ovoj vrsti petlje, tijelo petlje se izvršava uvijek barem jednom. Tada se procjenjuje stanje nakon testa, a ako truejest, izvršava se još jedan ciklus petlje.

Optimizacije

// 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--);

Petlja za ulazak

Četvrta i posljednja vrsta petlje naziva se for-inpetlja.Ima vrlo posebnu svrhu - nabraja imenovana svojstva bilo kojeg JavaScript objekta. Evo kako to izgleda:

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

Disekcija

Sličan je regularnojfor petlji samo po nazivu. Način na koji djeluje potpuno je drugačiji. A ta razlika čini ga puno sporijim od ostale tri petlje koje imaju jednake karakteristike performansi, tako da nije korisno pokušavati odrediti koja je najbrža.

Svaki put kada se petlja izvrši, varijabla propima ime drugog svojstva, a to je niz , na object.Izvršit će se dok se ne vrate sva svojstva. To bi bila svojstva samog predmeta, kao i svojstva naslijeđena kroz njegov prototipni lanac.

Bilješke

Nikada ne biste trebali koristiti „ for-in”za prevlačenje članova niza .

Svaka iteracija kroz ovu petlju uzrokuje traženje svojstva bilo na instanci ili na prototipu, što čini for-inpetlju puno sporijom od ostalih petlji. Za isti broj ponavljanja mogao bi biti sedam puta sporiji od ostalih.

Zaključak

  • for, whileI do-whilepetlje svi imaju slične karakteristike ponašanja, pa ni jedan tip petlje je znatno brže ili sporije od ostalih.
  • Izbjegavajte for-inpetlju ako ne trebate ponoviti niz nepoznatih svojstava objekta.
  • Najbolji načini za poboljšanje izvedbe petlje su smanjenje količine posla po iteraciji i smanjenje broja iteracija petlje .

Nadam se da je ovo bilo korisno za vas, kao i za mene!

Hvala na čitanju.

Resursi

“JavaScript visokih performansi” - Nicholas C. Zakas

Pročitajte više mojih članaka na mihail-gaberov.eu.