Benchmarking Javascript array creation, write, read.

array_benchmark.js

/*

Oddly, the results are not very intuitive. Seems grid_2d_array is fastest in all benchmarks,
though I was expecting grid_1d_array or at least grid_2d_lazy_array to win
(or maybe even grid_canvas to be surprising, but I was disappointed).

Results with size=[1920,1200] (on Chrome, though Firefox is similar):

--- grid_canvas (2d canvas treated as small 2d array int storage structure) ---
create: 1ms
write: 3924ms
read: 12934ms
total: 16860ms

--- grid_1d_array (A single array where 2d positions are mapped into 1d positions) ---
create: 1ms
write: 546ms
read: 142ms
total: 690ms

--- grid_2d_array (Array filled of arrays, each push()'d preset to 0's) ---
create: 31ms
write: 178ms
read: 144ms
total: 355ms

--- grid_2d_lazy_array (Array filled of arrays with undefined values) ---
create: 1ms
write: 299ms
read: 148ms
total: 449ms

*/

    function benchmark(name, fn, disabled) {
        if(disabled) return;
        var now = +new Date();
        fn();
        console.log(name + ': ' + (new Date() - now));
    }

    function stress_grid_write(g, size) {
        // Fill it with 1's
        iter_box([0, 0, size[0], size[1]], function(pos) {
            g.set(pos, 1);
        });

    }
    function stress_grid_read(g, size) {
        // Read all the 1's
        iter_box([0, 0, size[0], size[1]], function(pos) {
            g.get(pos);
        });
    }

    function stress_full(grid_class, size) {
        var a;
        benchmark('create', function() { a = grid_class(size); });
        benchmark('write', function() { stress_grid_write(a, size); });
        benchmark('read', function() { stress_grid_read(a, size); });
    }


    function run_benchmark(size) {
        benchmark('= canvas array', function() {
            stress_full(grid_canvas, size);
        });

        benchmark('= 1d array', function() {
            stress_full(grid_1d_array, size);
        });

        benchmark('= 2d array', function() {
            stress_full(grid_2d_array, size);
        });

        benchmark('= 2d lazy array', function() {
            stress_full(grid_2d_lazy_array, size)
        });
    }

// ---

function grid_2d_array(size) {
    var grid = [];
    for (var x=0, width=size[0]; x<width; x++) {
        var row = [];
        for(var y=0, height=size[1]; y<height; y++) row.push(0);
        grid.push(row);
    }

    return {
        _grid: grid,
        set: function(pos, value) {
            grid[pos[0]][pos[1]] = value;
        },
        get: function(pos) {
            return grid[pos[0]][pos[1]];
        }
    }
}


function grid_2d_lazy_array(size) {
    var grid = [];
    for (var x=0, width=size[0]; x<width; x++) {
        var row = [];
        row[size[1] - 1] = undefined;
        grid.push(row);
    }

    return {
        _grid: grid,
        set: function(pos, value) {
            grid[pos[0]][pos[1]] = value;
        },
        get: function(pos) {
            return grid[pos[0]][pos[1]];
        }
    }
}

function grid_1d_array(size) {
    w = size[0], h = size[1];
    var a = new Array(w * h);
    for(var i=w*size[1]; i>=0; i--) {
        a[i] = 0;
        break;
    }

    return {
        _a: a,
        set: function(pos, value) {
            a[pos[0] * w + pos[1]] = value;
        },
        get: function(pos) {
            return a[pos[0] * w + pos[1]];
        }
    }
}

function grid_canvas(size) {
    var canvas = document.createElement("canvas");

    canvas.width = size[0];
    canvas.height = size[1];

    var ctx = canvas.getContext("2d");

    return {
        _ctx: ctx,
        set: function(pos, value) {
            ctx.fillStyle = 'rgb(' + value +',0,0)';
            ctx.fillRect(pos[0], pos[1], 2, 2);
        },
        get: function(pos) {
            return ctx.getImageData(pos[0], pos[1], 1, 1).data[0];
        }
    }
}