Performance between multidimensional array or arrays of objects in JavaScript

Question

I have to load a good chunk of data form my API and I have the choice of the format that I get the data. My question is about performance and to choose the fastest format to load on a query and being able to read it fast as well in JavaScript.

I can have a two dimensional array :

[0][0] = true;
[0][1] = false;
[1][2] = true;
[...]
etc etc..

Or I can have an array of object :

[
{ x: 0, y: 0, data: true},
{ x: 0, y: 1, data: false},
{ x: 1, y: 2, data: true},
[...]
etc etc..
] 

I couldn't find any benchmark for this comparison for a GET request, with a huge amount of data.. If there is anything anywhere, I would love to read it !

The second part of the question is to read the data. I will have a loop that will need to get the value for each coordinate.

I assume looking up directly for the coordinate in a 2 dimensional array would be faster than looking up into each object at every loop. Or maybe I am wrong ?

Which one of the two format would be the fastest to load and read ?

Thanks.

Answer 1

For the first part of your question regarding the GET request, I imagine the array would be slightly quicker to load, but depending on your data, it could very well be negligible. I'm basing that on the fact that, if you take out the white space, the example data you have for each member of the array is 12 bytes, while the example data for the similar object is 20 bytes. If that were true for your actual data, theoretically there would be only 3/5 of the data to transfer, but unless you're getting a lot of data it's probably not going to make a noticeable difference.

To answer the second part of your question: the performance of any code is going to depend significantly on the details of your specific use case. For most situations, I think the most important point is:

• Objects are significantly more readable and user-friendly

That said, when performance/speed is an issue and/or high priority, which it sounds like could be the case for you, there are definitely things to consider. While it relates to writing data instead of reading it, I found this good comparison of the performance of arrays vs objects that brought up some interesting points. In running the tests above multiple times using Chrome 45.0.2454.101 32-bit on Windows 7 64-bit, I found these points to generally be true:

• Arrays will always be close to the fastest, if not the fastest
• If the length of the object is known/can be hard coded, it's possible to make their performance close to and sometimes better than arrays

In the test linked above, this code using objects ran at 225 ops/sec in one of my tests:

var sum = 0;
for (var x in obj) {
  sum += obj[x].payload;
}

Compared to this code using arrays that ran at 13,620 ops/sec in the same test:

var sum = 0;
for (var x = 0; x < arr.length; ++x) {
  sum += arr[x].payload
}

Important to note, however, is that this code using objects with a hard coded length ran at 14,698 ops/sec in the same test, beating each of the above:

var sum = 0;
for (var x = 0; x < 10000; ++x) {
  sum += obj[x].payload
}

All of that said, it probably depends on your specific use case what will have the best performance, but hopefully this gives you some things to consider.