Any way to improve JavaScript array performance?

Question

I'm porting some of my OpenGL code to WebGL and the fact that JavaScript doesn't have genuine arrays is sad. I can use Float32Array's (and other other ArrayBuffer types), but that doesn't seem to help performance.

As an experiment to compare Array vs Float32Array vs Float64Array performance, I timed bubble sort on 100000 floats to see if there was any difference:

function bubbleSort(array) {
    var N = array.length;
    for (var i = 0; i < N; i++) 
        for (var j = i; j < N-1; j++)
            if (array[j] > array[j+1]) {
                var tmp = array[j];
                array[j] = array[j+1];
                array[j+1] = tmp;
            }
}

// var nums = new Array(100000);        // regular 'JS' array
// var nums = new Float32Array(100000);   // actual buffer of 32-bit floats
var nums = new Float64Array(100000);   // actual buffer of 64-bit floats
for (var i = 0; i < nums.length; i++)
    nums[i] = Math.random() * 1000;

bubbleSort(nums);

for (var i = 0; i < nums.length; i++)
    console.log(nums[i]);

Not much difference. Really the compiler would need some static type information for the array argument for bubbleSort to really get decent performance. Are we just stuck with bad array performance in JS? Any way around this? Short of using ASM.js that is...

How did you actually test this? Are you sure it's not the `Math.random()` being called 100k times that's causing your performance issues? — Rob, Oct 05 '14 at 03:52
A post with "bubble sort" and "performance" seems an oxymoron. — user949300, Oct 05 '14 at 04:36
[].sort.call(nums, function(a,b){return a-b}); is WAY faster — dandavis, Oct 05 '14 at 04:49
I am amazed at folks who are missing the point. It was suppose to be slow! I just wanted to compare JS arrays vs typed arrays. I could have just done a 100 million random swaps, but I wanted the time to be mostly array indexing... — wcochran, Oct 05 '14 at 05:04
If you want performance, why aren't you using the Unsigned 8-bit buffer? Floats are murderous on performance, and, well, every number in JS is a float... ...which calls up the next query; why resort to hand-wound sorting, when you can call a built-in method, which will dispatch to native code, which is bound to be faster than anything you can write? I would say that those are two very quick and easy ways to improve performance of JS arrays; namely, let the browser's internals handle optimization. Q3A@60fps on a phone, in a browser, is rather impressive, all things considered. — Norguard, Oct 05 '14 at 05:42
Btw, your bubble sort is actually not working at all - it does only bubble large elements up, but not the smallest ones down. — Bergi, Oct 05 '14 at 11:02
@Norgard WebGL Vertex Buffer Objects that contain coordinate data will usually contain 32-bit floats. I don't care about here sorting at all -- I just was sorting to exercise JS array indexing mechanism. — wcochran, Oct 05 '14 at 20:00
@Bergi -- you're right -- the sort doesn't work :( -- doesn't really matter since it tangential to what I was trying to do. — wcochran, Oct 05 '14 at 20:11

score 6 · Accepted Answer · edited May 23 '17 at 10:33

You should see this answer: What is the performance of Objects/Arrays in JavaScript? (specifically for Google V8)

In particular the following points:

Array.push( data ); is faster than Array[nextIndex] = data by almost 20 times over.
V8 array writes are slightly faster than V8 reads

So yes, it looks like Array indexing is slow in JS. If it's true that array writes are faster than reads in performance test, then it is likely that the dynamic allocation isn't picky about where it puts the data (fastest first?), whereas when it comes to reading, that will be a lot of memory addresses to jump between and so will be far slower.

I'd be interested to see if you declare an array using literal syntax [0, 1, 2, ..., 100000], would the performance be any better?

(I'll set up a JSPerf if I have the time).

Excellent -- thanks! I imagine some (early) implementations just hashed on the index which is treated like a string -- then of course delete should be fast then. I was testing w/ Node which uses V8. More testing.... — wcochran, Oct 05 '14 at 13:48

Any way to improve JavaScript array performance?

1 Answers1