JavaScript array iteration direction

Question

When processing a very large in-memory array of uniform (same-type) JavaScript objects (each with just a few columns)...

Is there any impact on performance and/or or any other penalty to consider when choosing to iterate through it as row->column versus column->row?

Example

We have 100,000 data rows from a CSV file, each is an object with 10 integer values, and we need to touch every value in it for a certain calculation.

Will it make any difference whether we iterate through it vertically or horizontally? Does the modern V8 care about such things in the slightest?

var data = [...]; // array of many same-type objects;

// horizontal iteration:
for (var p in data[0]) {
    for (var i = 0; i < data.length; i++) {
        var value = data[i][p]; // current value;
        // calculate here from the value;
    }
}

// vertical iteration:
for (var i = 0; i < data.length; i++) {
    for (var p in data[0]) {
        var value = data[i][p]; // current value;
        // calculate here from the value;
    }
}

Answer 1

Only one way to be sure is to run some benchmarks, I made a jsperf: http://jsperf.com/vertical-vs-horizontal-loop The results depends on the engine like expected. Early results from tests I did (Chrome 42 is Edge on Window 10):

|     UserAgent    | horizontal iteration | vertical iteration | vertical iteration with caching | # Tests |
|:----------------:|:--------------------:|:------------------:|:-------------------------------:|:-------:|
| Chrome 42.0.2311 |         1,067        |         287        |               226               |    2    |
|   Firefox 43.0   |         5,621        |         415        |               443               |    2    |
|      IE 11.0     |          976         |         441        |               313               |    2    |
|  Iron 46.0.2450  |         1,557        |         901        |              1,907              |    2    |
(numbers are ops/s, the higher the better)

Interestingly enough, horizontal iteration ranges from twice faster to dozen of times faster (on Firefox). But vertical iteration with caching is the fastest only on Iron 46 (Chromium fork so V8 engine).

Benchmarks with node v5.1.0:

horizontal iteration x 1,140 ops/sec ±1.11% (63 runs sampled)
vertical iteration x 833 ops/sec ±0.92% (68 runs sampled)
vertical iteration with caching x 1,678 ops/sec ±1.13% (67 runs sampled)
Fastest is vertical iteration with caching

Answer 2

Vertical in reverse is better for better memory utilisation and performance. I would say iterate through data array in reverse. And few small things to taken into consideration is incrementing i with i += 1 instead of i++ or ++i. But these would show very small performance benefits as you are iterating through a large array. If you ask me, I follow either of below approaches

1. Use Async library's each function to iterate through data array and do operations. The advantages are they are truly asynchronous, so wont block the execution thread. I have used this library to compare two large arrays where each array operation includes drawing html to canvas and comparing. Async js did that job very well for me.
2. Create worker (n) threads depending on user machine, then slice the large array into smaller chunks, feed workers with chunked arrays. Whichever worker completes first will pick another chunked array from queue. At the end you can aggregate the result. I have tested this approach myself. I tried to sort an array of 50K array items. With regular execution browser was blocked but with this approach it was able to complete perfectly fine. I even tried with 300K items. I would say, this is better approach if you are not supporting lower end browsers.

Answer 3

Vertical is obviously much better since you can cache data[i] and only look it up once before checking the properties.

// vertical iteration:
for (var i = 0; i < data.length; i++) {
    var obj = data[i] // <--- here
    for (var p in obj) {
        var value = obj[p]; // current value;
        // calculate here from the value;
    }
}