fjakobs/array_performance.html

## array_performance.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Array Performance</title>
	<meta name="author" content="Martin Wittemann">
	<meta name="author" content="Fabian Jakobs">
	<!-- Date: 2010-03-09 -->
	<style type="text/css" media="screen">

table {
    border-collapse: collapse;
    border: 1px solid black;
}

td, th {
    border: 1px solid black;
    padding: 5px;
}

th {
    background: #DDD;
}

	</style>

	<script src="logger.js" charset="utf-8"></script>
	<script src="measure.js" charset="utf-8"></script>
</head>
<body>

<div id="logger">
</div>

<script type="text/javascript" charset="utf-8">

var tests = {
    "array base line" : function() {
    	var ar = [];
    	for (var i = 0; i < 500000; i++) {
    	    ar[i] = i;
    	};
    },
    "object base line" : function() {
    	var map = {};
    	for (var i = 0; i < 500000; i++) {
    	    map[i] = i;
    	};
    },
    "small sparse array" : function() {
    	var ar = [];
    	ar[10] = 10;
    	for (var i = 0; i < 500000; i++) {
    	    ar[i] = i;
    	};
    },
    "huge sparse array" : function() {
    	var ar = [];
    	ar[50000000] = 10;
    	for (var i = 0; i < 500000; i++) {
    	    ar[i] = i;
    	};
    },
    "array as object" : function() {
    	var ar = [];
    	ar.monkey = 10;
    	for (var i = 0; i < 500000; i++) {
    	    ar[i] = i;
    	};
    },
    "reverse array" : function() {
    	var ar = [];
    	for (var i = 500000; i>0; i--) {
    	    ar[i] = i;
    	};
    },
    "reverse array with new Array(500000)" : function() {
    	var ar = new Array(500000);
    	for (var i = 500000; i>0; i--) {
    	    ar[i] = i;
    	};
    }
};

var logger = new Logger(document.getElementById("logger"));
var start = new Date();

measure(tests)(function(result) {
    logger.log(result.name, tests[result.name], result.times);
}, function() {
    logger.log("DONE", "", [new Date() - start]);
});

</script>
</body>
</html>

## logger.js
(function() {

function median(values) {
    var values = values.sort(function(a, b) {
        return a>b ? 1 : -1;
    });
    return values[Math.floor(values.length/2)];
}

function mean(values) {
    var sum = 0;
    for (var i=0; i < values.length; i++) {
        sum += values[i];
    };
    return sum / values.length;
}


window.Logger = function(el)
{
    this.table = document.createElement("table");
    this.addRow("th", ["Name", "Code", "Times", "Median", "Mean"]);

    el.appendChild(this.table);
}

Logger.prototype = {
    addRow: function(type, data) {
        var row = document.createElement("tr");
        for (var i=0; i<data.length; i++)
        {
            var td = document.createElement(i==0 ? "th" : type);
            td.innerHTML = data[i];
            row.appendChild(td);
        }
        this.table.appendChild(row);
    },

    log: function(name, code, times)
    {
        var times = times.sort(function(a, b) {
            return a>b ? 1 : -1;
        });

        var data = [
          name,
          "<pre>" + code + "</pre>",
          times.join(", "),
          median(times),
          mean(times)
        ];
        this.addRow("td", data);
    }
}
})();

## measure.js
function measure(tests) {
    return function(onResult, onFinish) {
        var testFunctions = [];
        for (var name in tests) {
            testFunctions.push(asyncRepeated(asyncTest(tests[name], name), 5));
        }

        runSerial(testFunctions)(function(results) {
            var result = {}
            result.name = results[0].name;
            result.times = [];
            for (var i=0; i<results.length; i++) {
                result.times.push(results[i].time);
            }
            onResult(result)
        }, onFinish);
    }
}

function asyncTest(call, name) {
    return runAsync(function() {
        var start = new Date();
        call();
        var time = new Date() - start;
        return {name: name, time: time};
    });
}

function runAsync(func) {
    return function(callback) {
        setTimeout(function() {
            callback(func());
        }, 0);
    }
}

function asyncRepeated(call, count) {
    var results = [];
    var calls = [];
    return function(callback) {
        for (var i=0; i<count; i++) {
            calls.push(call);
        }
        runSerial(calls)(function(result) {
            results.push(result);
        }, function() {
            callback(results);
        });
    }
}

function runSerial(asyncs) {
    return function(onResult, onFinish) {
        function runFirst() {
            if (!asyncs.length) {
                return onFinish();
            }
            var call = asyncs.shift();
            call(function(result) {
                onResult(result);
                runFirst();
            });
        }
        runFirst();
    }
}
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Array Performance</title>
	<meta name="author" content="Martin Wittemann">
	<meta name="author" content="Fabian Jakobs">
	<!-- Date: 2010-03-09 -->
	<style type="text/css" media="screen">

	table {
	border-collapse: collapse;
	border: 1px solid black;
	}

	td, th {
	border: 1px solid black;
	padding: 5px;
	}

	th {
	background: #DDD;
	}

	</style>

	<script src="logger.js" charset="utf-8"></script>
	<script src="measure.js" charset="utf-8"></script>
	</head>
	<body>

	<div id="logger">
	</div>

	<script type="text/javascript" charset="utf-8">

	var tests = {
	"array base line" : function() {
	var ar = [];
	for (var i = 0; i < 500000; i++) {
	ar[i] = i;
	};
	},
	"object base line" : function() {
	var map = {};
	for (var i = 0; i < 500000; i++) {
	map[i] = i;
	};
	},
	"small sparse array" : function() {
	var ar = [];
	ar[10] = 10;
	for (var i = 0; i < 500000; i++) {
	ar[i] = i;
	};
	},
	"huge sparse array" : function() {
	var ar = [];
	ar[50000000] = 10;
	for (var i = 0; i < 500000; i++) {
	ar[i] = i;
	};
	},
	"array as object" : function() {
	var ar = [];
	ar.monkey = 10;
	for (var i = 0; i < 500000; i++) {
	ar[i] = i;
	};
	},
	"reverse array" : function() {
	var ar = [];
	for (var i = 500000; i>0; i--) {
	ar[i] = i;
	};
	},
	"reverse array with new Array(500000)" : function() {
	var ar = new Array(500000);
	for (var i = 500000; i>0; i--) {
	ar[i] = i;
	};
	}
	};

	var logger = new Logger(document.getElementById("logger"));
	var start = new Date();

	measure(tests)(function(result) {
	logger.log(result.name, tests[result.name], result.times);
	}, function() {
	logger.log("DONE", "", [new Date() - start]);
	});

	</script>
	</body>
	</html>
	(function() {

	function median(values) {
	var values = values.sort(function(a, b) {
	return a>b ? 1 : -1;
	});
	return values[Math.floor(values.length/2)];
	}

	function mean(values) {
	var sum = 0;
	for (var i=0; i < values.length; i++) {
	sum += values[i];
	};
	return sum / values.length;
	}


	window.Logger = function(el)
	{
	this.table = document.createElement("table");
	this.addRow("th", ["Name", "Code", "Times", "Median", "Mean"]);

	el.appendChild(this.table);
	}

	Logger.prototype = {
	addRow: function(type, data) {
	var row = document.createElement("tr");
	for (var i=0; i<data.length; i++)
	{
	var td = document.createElement(i==0 ? "th" : type);
	td.innerHTML = data[i];
	row.appendChild(td);
	}
	this.table.appendChild(row);
	},

	log: function(name, code, times)
	{
	var times = times.sort(function(a, b) {
	return a>b ? 1 : -1;
	});

	var data = [
	name,
	"<pre>" + code + "</pre>",
	times.join(", "),
	median(times),
	mean(times)
	];
	this.addRow("td", data);
	}
	}
	})();
	function measure(tests) {
	return function(onResult, onFinish) {
	var testFunctions = [];
	for (var name in tests) {
	testFunctions.push(asyncRepeated(asyncTest(tests[name], name), 5));
	}

	runSerial(testFunctions)(function(results) {
	var result = {}
	result.name = results[0].name;
	result.times = [];
	for (var i=0; i<results.length; i++) {
	result.times.push(results[i].time);
	}
	onResult(result)
	}, onFinish);
	}
	}

	function asyncTest(call, name) {
	return runAsync(function() {
	var start = new Date();
	call();
	var time = new Date() - start;
	return {name: name, time: time};
	});
	}

	function runAsync(func) {
	return function(callback) {
	setTimeout(function() {
	callback(func());
	}, 0);
	}
	}

	function asyncRepeated(call, count) {
	var results = [];
	var calls = [];
	return function(callback) {
	for (var i=0; i<count; i++) {
	calls.push(call);
	}
	runSerial(calls)(function(result) {
	results.push(result);
	}, function() {
	callback(results);
	});
	}
	}

	function runSerial(asyncs) {
	return function(onResult, onFinish) {
	function runFirst() {
	if (!asyncs.length) {
	return onFinish();
	}
	var call = asyncs.shift();
	call(function(result) {
	onResult(result);
	runFirst();
	});
	}
	runFirst();
	}
	}