JS Sebességteszt

Az elágazások a programozás során elengedhetetlen kellékek, ezért rögtön velük kezdjük

Iterációk száma: 10.000.000

    var answer = 2;
    var iteration = 10000000;
    var i = 0;
    while(i < iteration){
        if(answer == 1) {}
            else if(answer == 2) {}
        i++;
    }

    var answer = 2;
    var iteration = 10000000;
    var i = 0;
    while(i < iteration){
        if(answer == 1) {}
            else if(answer == 3) {}
            else {}
       i++;
    }

    var answer = 2;
    var iteration = 10000000;
    var i = 0;
    while(i < iteration){
        if(answer === 1) {}
            else if(answer === 2) {}
        i++;
    }

    var answer = 2;
    var iteration = 10000000;
    var i = 0;
    while(i < iteration){
        if(answer === 1) {}
            else if(answer === 3) {}
            else {}
       i++;
    }

    var answer = 2;
    var iteration = 10000000;
    var i = 0;
    while(i < iteration){
        switch(answer) {
            case 1:
                break;
            case 2:
                break;
        }
        i++;
    }

    var answer = 2;
    var iteration = 10000000;
    var i = 0;
    while(i < iteration){
        switch(answer) {
            case 1:
                break;
            case 3:
                break;
            default:
                break;
        }
        i++;
    }

    var answer = 2;
    var iteration = 10000000;
    var i = 0;
    var x = 0;
    while(i < iteration){
        if(answer == 1) {
            x = 1;
        } else {
            x = 2;
        }
        i++;
    }

    var answer = 2;
    var iteration = 10000000;
    var i = 0;
    var x = 0;
    while(i < iteration){
        x = (answer==1)?1:2;
        i++;
    }

Konklúzió:

A vezérlési szerkezeteknél kitűnt az egysoros if lassúsága a normál if-else szerkezettel szemben.

A === típus egyezést is figyelembe vevő vizsgálatok általában lassabbnak bizonyultak a sima == érték vizsgálatnál, érdekes ez a PHP-nál pont fordítva volt.

A switch-nél a default ág jelenléte vagy hiánya nem okozott eltérést.

Böngészők tekintetében a Chrome vitte a mezőnyt mindenben, a Firefox nem sokkal lemaradva, és végül egy érdekesen lassú Internet Explorer 9. Meg kell említeni azonban, hogy az IE9 érdekesen működik, mert ha kellően sokszor egymás után lefuttatunk egy adott tesztet, akkor kimagaslóan jó (8-9ms) körüli eredményt produkál. Ezt valószínűsítem cacheléssel oldja meg, viszont azt az eredményt nem vehetjük alapul a többi böngészővel szemben, akik nem cacheből veszik az eredményt.

Frissítés (2013-01-04):

Elmondható, hogy minden böngésző 2x gyorsabban végrehajtja a teszteket, az IE10 még látványosabban fejlődött, bár picit mindig lemarad még így is.

Frissítés (2013-12-04):

Az IE11 úgy összességében jobb eredményeket produkál mint elődei. A Chrome és FF hozták a szokásos formát.

A sima for() és while() ciklusokat hasonlítja egymáshoz, terhelés nélkül.

Iterációk száma: 10.000.000

    var iteration = 10000000;
    for(var i = 0; i < iteration; $i++);

    var iteration = 10000000;
    var i = 0;
    while(i < iteration){
        i++;
    }

    var iteration = 10000000;
    for(var i = iteration; i > 0; i--);

    var iteration = 10000000;
    for(var i = iteration; i--; );

    var iteration = 10000000;
    while(iteration > 0){
        iteration--;
    }

    var iteration = 10000000;
	while(iteration--);

Konklúzió:

A while() ciklus futott gyorsabban, kivéve Chrome-ban, ott megegyezett a for() és while() ideje.

Az IE9 a harmadik frissítés után azonnal dobta cacheből az eredményt, a szokásos 10ms-is idő körül...

Frissítés (2013-01-04):

Mind a három böngésző javított az eredményein, az IE is sokat fejlődött, de picit le van még maradva itt.

Frissítés (2013-01-23):

Egy érdekes és szerintem hasznos teszt típussal bővítettem a for/while ciklusokat. Mégpedig a vissza felé számlálás, itt két megoldás van a ciklusok feltételénél, vagy "i > 0" (amíg nagyobb mint 0), vagy simán "i" a feltétel (amíg true). Nos ez úgy látszik (FireFox-t kivéve) egyáltalán nem mindegy, ugyan is az látszik, hogy a relációs kondíció gyorsabbnak bizonyult mind a for, mind a while esetében.

Frissítés (2013-12-04):

Szinte mindegyik új verziónál picit mintha esett volna a teljesítmény.

Ha előre tudjuk egy ciklus iterációinak számát, sokat gyorsíthatunk a dolgon ha azt fixre állítjuk

Iterációk száma: 10.000.000

    // init
    var i = 0; var tmp = '';
    while(i < 1000) {
      tmp += 'a';
      i++;
    }
    var x = Array();
    var i = 0;
    while(i < 10000000) {
      x.push(tmp);
      i++;
    }
    // test
    var size = x.length;
    for (var i=0; i < size; i++);

    // init
    var i = 0; var tmp = '';
    while(i < 1000) {
      tmp += 'a';
      i++;
    }
    var x = Array();
    var i = 0;
    while(i < 10000000) {
      x.push(tmp);
      i++;
    }
    // test
    for (var i=0; i < x.length; i++);

Konklúzió:

Már csak ha jól belegondolunk is, a várható eredményt hozzák a böngészők (motorok), így az előre kiszámított ciklus számmal jóval gyorsabb futást tudunk elérni.

Frissítés (2013-01-04):

Mind a három böngésző javított az eredményein, az IE is sokat fejlődött, de itt is le van még maradva picit.

Keressük meg melyik megoldás a leghatékonyabb egy hash tömböt végig pörgetni, illetve módosítani.

A teszthez egy 50.000 elemű tömböt használtunk, bejegyzései 24byte-os kulcsot és 10k-nyi adatot tartalmaznak.

    // init
    var i = 0;
    var tmp = '';
    while(i < 10000) {
      tmp += 'a';
      i++;
    }
    var aHash = new Object();
    var i = 10000;
    while(i < 60000) {
        var addr = '100000000000000000000' + i.toString();
        aHash[''+ addr +''] = tmp;
        i++;
    }
    // test
    for(var val in aHash) ;

    // init
    var i = 0;
    var tmp = '';
    while(i < 10000) {
      tmp += 'a';
      i++;
    }
    var aHash = new Array();
    var i = 10000;
    while(i < 60000) {
        var addr = '100000000000000000000' + i.toString();
        aHash[''+ addr +''] = tmp;
        i++;
    }
    // test
    for(var val in aHash) ;

    // init
    var i = 0;
    var tmp = '';
    while(i < 10000) {
      tmp += 'a';
      i++;
    }
    var aHash = new Object();
    var i = 10000;
    while(i < 60000) {
        var addr = '100000000000000000000' + i.toString();
        aHash[''+ addr +''] = tmp;
        i++;
    }
    // test
    for(var val in aHash) aHash[val] += 'a';

    // init
    var i = 0;
    var tmp = '';
    while(i < 10000) {
      tmp += 'a';
      i++;
    }
    var aHash = new Array();
    var i = 10000;
    while(i < 60000) {
        var addr = '100000000000000000000' + i.toString();
        aHash[''+ addr +''] = tmp;
        i++;
    }
    // test
    for(var val in aHash) aHash[val] += 'a';

Konklúzió:

Nagyjából mindegy, hogy Object() vagy Array()-t használunk, az Object() egy hajszálnyival jobban teljesített. Az IE9 meglepően jó eredményeket produkált... cache nélkül...

Frissítés (2013-01-04):

Chrome: nincs jelentős változás, tartja, talán hajszállal jobb

FireFox: hasonló a Chromehoz, valamicskét javult, de nem jelentős

IE: szépen javított az eddig is jó eredményein

Vizsgáljuk meg, hogyan járunk jobban ha egy nagy elemszámú tömböt akarunk feltölteni.

A teszthez 1.000.000 eleműre töltjük a tömböt, bejegyzünk 1k-nyi adatokat.

    // init
    var i = 0;
    var tmp = '';
    while(i < 1000) {
      tmp += 'a';
      i++;
    }
    var aHash = new Array();
    // teszt
    var i = 0;
    while(i < 1000000) {
        aHash[i] = tmp;
        i++;
    }

    // init
    var i = 0;
    var tmp = '';
    while(i < 1000) {
      tmp += 'a';
      i++;
    }
    var aHash = new Array();
    //teszt
    var i = 0;
    while(i < 1000000) {
        aHash.push(tmp);
        i++;
    }

    // init
    var i = 0;
    var tmp = '';
    while(i < 1000) {
      tmp += 'a';
      i++;
    }
    var aHash = new Array();
    //teszt
    var i = 0;
    while(i < 250000) {
        aHash.push(tmp, tmp, tmp, tmp);
        i++;
    }

Konklúzió:

A Chrome-t kivéve a feltöltést az indexeléssel a leggyorsabb csinálni, ha viszont függetlenek akarunk maradni, akkor a push() nyerő.

A push('aa') és push('aa','aa'...'aa') között nagy különbség nincs igazából (kivéve az IE-t).

Legjobb eredményeket a FireFox produkálta, majd az IE9 és Chrome következett, úgy látszik az IE9 tömbkezelésben egész jó.

Frissítés (2013-01-04):

Chrome: valamelyest javultak az értékek, bár több argumentú push-nál lassulás látható

FireFox: mint a Chrome-nál csak itt kiemelkedő a javulás

IE: igazi meglepetés, nagyon korrekt eredményeket produkált mind a 3 tesztben

Iterációk száma: 10.000.000

    var obj = { foo: 'bar'};
    // test
    while(i < 10000000) {
        if (typeof obj.tmp != 'undefined'){;}
        i++;
    }

    var obj = { foo: 'bar'};
    // test
    while(i < 10000000) {
        if (obj.tmp != undefined) {;}
        i++;
    }

    var obj = { foo: 'bar'};
    // test
    while(i < 10000000) {
        if (obj.tmp !== undefined) {;}
        i++;
    }

    var obj = { foo: 'bar'};
    // test
    while(i < 10000000) {
        if (obj.hasOwnProperty('tmp')) {;}
        i++;
    }

    var obj = { foo: 'bar'};
    // test
    while(i < 10000000) {
        if ('tmp' in obj) {;}
        i++;
    }

    var obj = { foo: 'bar'};
    // test
    while(i < 10000000) {
        // Figyelem, 0 vagy üres string esetén is false a vizsgálat
        // de sok esetben használható feltétel ez is
        if (obj.tmp) {;} 
        i++;
    }

Konklúzió:

Na itt aztán vegyes a kép... Böngészőnként eltérő melyik, melyiket részesíti előnyben. Ami jól látható, hogy Chrome-ban a typeof a legjobb és a !=, !== undefined szorosan követi.

FireFoxnál a ('tmp' in obj) adja a legjobb eredményt (pont a Chrome fordítottja), valamint az IE9 mindenhol sok időt kér, talán a !=, !== undefined vizsgálatok a legszerencsésebb választások.

Ha kódjainkban nem teszünk különbséget a futtató környezetben, akkor a !=, !== undefined vizsgálatok a javasoltak...:(

Frissítés (2013-01-04):

Felvetődött időközben (Perlaki Attila kérdésére), hogy az if(obj.tmp) egyszerű vizsgálat ki lett hagyva a tesztből. Igen valóban, mert ha a vizsgált változó létezik de 0 vagy üres string, akkor is false-t fog eredményül adni a vizsgálat.

A feltételt azonban bevettem a tesztbe, és egyúttal ezt a teszt kört az új böngésző trión is lefuttattam. Azért van kis meglepetés:

A Chrome sok esetben még gyorsabb lett, bár van ahol meg pont lassabb. A FireFox nagyon sokat, látványosan gyorsult és az IE10 is kezd felzárkózni, de még van mit behoznia.

Frissítés (2013-12-04):

A Firefox 25 szépen beállított az új rekordokat, ezt kellene a többieknek is követnie :)...