Kuinka optimoida JavaScript-sovelluksesi silmukoilla

Kaikki haluavat korkean suorituskyvyn sovelluksia - joten tässä viestissä opimme, kuinka saavuttaa tämä tavoite.

Yksi helpoimmista ja laiminlyötyistä asioista, joita voit tehdä JavaScript-sovellusten suorituskyvyn parantamiseksi, on oppia kirjoittamaan oikein tehokkaita silmukka-lauseita. Tämän artikkelin idea on auttaa siinä.

Näemme JavaScriptin käyttämät silmukan päätyypit ja kuinka voimme kirjoittaa ne suorituskykyisellä tavalla.

Aloitetaanpa!

Silmukan suorituskyky

Silmukan suorituskyvyn osalta keskustelu on aina käytettävästä silmukasta. Mikä on nopein ja suorituskykyisin? Totuus on, että JavaScriptin tarjoamista neljästä silmukkatyypistä vain yksi niistä on merkittävästi hitaampi kuin muut - for-insilmukka. Silmukkatyypin valinnan tulisi perustua vaatimuksiisi eikä suorituskykyyn .

On olemassa kaksi päätekijää, jotka vaikuttavat silmukan suorituskyvyn - työ iterointia kohti ja määrä toistojen .

Alla olevissa osioissa näemme, kuinka niitä pienentämällä voimme vaikuttaa myönteisesti silmukan suorituskykyyn.

Loopille

Kolmas painos ECMA-262 (spesifikaatio, joka määrittelee Javascriptin perussyntaksin ja käyttäytymisen) määrittelee neljän tyyppiset silmukat. Ensimmäinen on forvakiosilmukka, joka jakaa syntaksin muiden C-tyyppisten kielten kanssa:

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

Tämä on luultavasti yleisimmin käytetty JavaScript-silmukointirakenne. Jotta voisimme ymmärtää, miten voimme optimoida sen työn, meidän on leikattava sitä hieman.

Dissektio

forSilmukka koostuu neljästä osasta: alustuksen testiä ehto, silmukka elin, ja post-suorittaa. Se toimii seuraavasti: ensin suoritetaan alustuskoodi (var i = 0;). Sitten ennakkotesti (i <10;). Jos ennakkotestissä arvioidaan to true, silmukan runko suoritetaan. Sen jälkeen suorituksen jälkeinen koodi (i ++) suoritetaan.

Optimoinnit

Ensimmäinen vaihe silmukan työn määrän optimoinnissa on minimoida objektijäsenten ja taulukkoelementtien haku.

Voit myös parantaa silmukoiden suorituskykyä kääntämällä niiden järjestystä. JavaScriptissä silmukan kääntäminen johtaa pienten silmukoiden suorituskyvyn parantamiseen edellyttäen, että eliminoit ylimääräiset toiminnot sen seurauksena.

Molemmat yllä olevat lauseet pätevät myös kahdelle muulle nopeammalle silmukalle ( whileja 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]); }

Vaikka silmukka

Toinen silmukatyyppi on whilesilmukka. Tämä on yksinkertainen esisilmukka, joka koostuu ennakkotilasta ja silmukan rungosta.

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

Dissektio

Jos ennakkotesti arvioidaan true, silmukan runko suoritetaan. Jos ei - se ohitetaan. Jokainen whilesilmukka voidaan korvata forja päinvastoin.

Optimoinnit

// 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-whileon kolmas silmukatyyppi ja se on ainoa testin jälkeinen silmukka JavaScriptissä. Se koostuu kehon silmukasta ja testin jälkeisestä kunnosta:

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

Dissektio

Tämän tyyppisessä silmukassa silmukan runko suoritetaan aina ainakin kerran. Sitten testin jälkeistä ehtoa arvioidaan, ja jos se truetapahtuu, suoritetaan toinen silmukkasykli.

Optimoinnit

// 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-silmukka

Neljännen ja viimeisen silmukan tyyppiä kutsutaan for-insilmukaksi.Sillä on hyvin erityinen tarkoitus - luetellaan minkä tahansa JavaScript-objektin nimetyt ominaisuudet. Näin se näyttää:

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

Dissektio

Se on samanlainen kuin tavallinenfor silmukka vain nimeltään. Tapa, jolla se toimii, on täysin erilainen. Ja tämä ero tekee siitä paljon hitaamman kuin muilla kolmella silmukalla, joilla on vastaavat suorituskykyominaisuudet, joten ei ole hyödyllistä yrittää selvittää nopeinta.

Joka kerta, kun silmukka suoritetaan, muuttujalla propon toisen ominaisuuden nimi, joka on merkkijono . object.Se suoritetaan, kunnes kaikki ominaisuudet on palautettu. Nämä olisivat itse objektin ominaisuudet, samoin kuin ne, jotka periytyvät sen prototyyppiketjun kautta.

Huomautuksia

Sinun ei pitäisi koskaan käyttää " for-in”iteroimaan ryhmän jäseniä .

Jokainen iterointi tämän silmukan läpi aiheuttaa ominaisuushaun joko instanssille tai prototyypille, mikä tekee for-insilmukasta paljon hitaampaa kuin muut silmukat. Samalla iterointimäärällä se voi olla seitsemän kertaa hitaampi kuin muut.

Johtopäätös

  • for, whileJa do-whilesilmukat kaikilla on samanlainen suorituskyky ominaisuudet, ja niin ei ole yksi silmukka tyyppi on huomattavasti nopeampi tai hitaampi kuin toiset.
  • Vältä for-insilmukkaa, ellei sinun tarvitse toistaa useita tuntemattomia objektiominaisuuksia.
  • Paras tapa parantaa silmukan suorituskykyä on vähentää iterointia kohden tehdyn työn määrää ja vähentää silmukka-iteraatioiden määrää .

Toivon, että tästä oli hyötyä sinulle, samoin kuin minulle!

Kiitos lukemisesta.

Resurssit

"Suorituskykyinen JavaScript" - Nicholas C. Zakas

Lue lisää artikkeleistani osoitteesta mihail-gaberov.eu.