Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Performance: using array in the object namespace vs local array

I was playing with some javascript performance optimizations and found something interesting. Here is the code:

function gObject() {

    this.obj = [];
    this.LIMIT = 100000;

    this.doLoopLocal = function () {
        var o = [];
        for (var i=0;i<this.LIMIT;i+=1) {
            o.push(i);
        }
        return o;
    };      

    this.doLoopObject = function () {
        this.obj = [];
        for (var i=0;i<this.LIMIT;i+=1) {
            this.obj.push(i);
        }
    };
};

var g = new gObject();

console.time('Using Local array');
g.doLoopLocal();
console.timeEnd('Using Local array');

console.time('Using Object array');
g.doLoopObject();
console.timeEnd('Using Object array');

When I run it, the log tells me that using local arrays is slower than using array defined in the object namespace. The difference is significant - 8 to 10 times! (FF 18.0.1)

Using Local array: 16ms
Using Object array: 2ms

A screenshot:enter image description here

I was always assuming that using objects defined locally within a function is faster, but this experiment shows me wrong. Why would this be happening?

UPDATE: I tried the script in the local Firefox console and the numbers are something that I expected in the first place: using local array outperforms using object array. So the real cause is Firebug that for some reason skews the numbers and show incorrect result. Something to keep in mind.

like image 421
Vlad Avatar asked Nov 12 '22 12:11

Vlad


1 Answers

As always with magic, the magic lies in the eyes who believes it's happening.
What are you testing here by the way ? If we forget that, in your doLoopObject, you do not return this.obj, just testing a few times shows that the results are 'random', even worse : if you reverse the order of the tests, they might change depending on Browser. And results will depend on the time you wait in between two clicks. If you wait a few seconds, they will always be almost equal.
Now be attentive, on JSPerf, to the speed the numbers are growing, and, especially on Firefox the explanation becomes quite obvious : there are periodic slow-down : the garbage collector is triggered by such garbage creating functions. When it triggers, the figures will increase more slowly, might it be for an object or a local var (it doesn't matter). What you are measuring here is the garbage collector time, NOT the push() time on an object property compared to a local variable. That explains why the order, and the time in between tests, changes things.
I will add that the change in between two tests is far too big to conclude anything.

But most important is that, when waiting enough, both tests performs the same on FF/Safari...

The only conclusion you can draw from all this is : both methods performs the same.

BUT Since anyone allocating that much 'heap' would anyway allocate at once, using the simple myArray[lastIndex-1]=0, i'm afraid the real conclusion is : this test shows nothing.

like image 164
GameAlchemist Avatar answered Nov 15 '22 05:11

GameAlchemist