Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>NodeList/HTMLCollection conversion/concatenation to array (testing)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
// get elapsed time
function timeElapsed(t) { return ((new Date()).getTime() - t); }
onload = function() {
var i, x, $tt, output = document.getElementById('output'),
concat = Array.prototype.concat,
filter = Array.prototype.filter,
slice = Array.prototype.slice,
iterations = 1000;
function concat0(listout, listin) {
return concat.call(listout, filter.call(listin, Function("return true;")));
}
function concat1(listout, listin) {
return concat.call(listout, slice.call(listin));
}
function concat2(listout, listin) {
var pad = listout.length, length = listin.length;
while (length--) listout[pad + length] = listin[length];
return listout;
}
function concat3(listout, listin) {
var i = 0, length = listin.length;
while (length > i) listout.push(listin[i++]);
return listout;
}
function concat4(listout, listin) {
var length = listin.length;
while (length--) listout.push(listin[length]);
return listout;
}
function concat5(listout, listin) {
var i = 0, item;
while (item = listin[i++]) listout.push(item);
return listout;
}
function concat6(listout, listin) {
var i = 0, pad = listout.length;
while (listout[pad + i] = listin[i++]);
listout.pop();
return listout;
}
function concat7(listout, listin) {
var i = 0, item;
for (; item = listin[i]; ++i) listout[listout.length] = item;
return listout;
}
function concat8(listout, listin) {
var i = 0, item, pad = listout.length;
for (; item = listin[i]; ++i) listout[pad + i] = item;
return listout;
}
function concat9(listout, listin) {
var i = 0, element, pad = listout.length;
while (element = listin[i]) listout[pad + i++] = element;
return listout;
}
// Useless SLOW ! Not supported on IE and older Opera browsers.
/*
// save starting time
$tt = (new Date).getTime();
x = [];
for (i = 0; iterations > i; i++) {
x = concat0(x, document.getElementsByTagName('div'));
}
// output total time
output.innerHTML += ' * 0 ' + (x.length == document.getElementsByTagName('div').length * iterations ? 'PASSED' : 'FAILED') +
' in ' + timeElapsed($tt) + 'ms. UNSAFE, uses "concat/filter" Array extension missing in IE<br>';
// save starting time
$tt = (new Date).getTime();
x = [];
for (i = 0; iterations > i; i++) {
x = concat1(x, document.getElementsByTagName('div'));
}
// output total time
output.innerHTML += ' * 1 ' + (x.length == document.getElementsByTagName('div').length * iterations ? 'PASSED' : 'FAILED') +
' in ' + timeElapsed($tt) + 'ms. UNSAFE, uses "concat/slice" Array extensions missing in IE<br>';
*/
// save starting time
$tt = (new Date).getTime();
x = [];
for (i = 0; iterations > i; i++) {
x = concat2(x, document.getElementsByTagName('div'));
}
// output total time
output.innerHTML += ' * 2 ' + (x.length == document.getElementsByTagName('div').length * iterations ? 'PASSED' : 'FAILED') +
' in ' + timeElapsed($tt) + 'ms. UNSAFE, uses input length decrement and array assignment<br>';
// save starting time
$tt = (new Date).getTime();
x = [];
for (i = 0; iterations > i; i++) {
x = concat3(x, document.getElementsByTagName('div'));
}
// output total time
output.innerHTML += ' * 3 ' + (x.length == document.getElementsByTagName('div').length * iterations ? 'PASSED' : 'FAILED') +
' in ' + timeElapsed($tt) + 'ms. UNSAFE, uses input length offset, push and post-increment<br>';
// save starting time
$tt = (new Date).getTime();
x = [];
for (i = 0; iterations > i; i++) {
x = concat4(x, document.getElementsByTagName('div'));
}
// output total time
output.innerHTML += ' * 4 ' + (x.length == document.getElementsByTagName('div').length * iterations ? 'PASSED' : 'FAILED') +
' in ' + timeElapsed($tt) + 'ms. UNSAFE, uses input length offset, post-decrement and push<br>';
// save starting time
$tt = (new Date).getTime();
x = [];
for (i = 0; iterations > i; i++) {
x = concat5(x, document.getElementsByTagName('div'));
}
// output total time
output.innerHTML += ' * 5 ' + (x.length == document.getElementsByTagName('div').length * iterations ? 'PASSED' : 'FAILED') +
' in ' + timeElapsed($tt) + 'ms. SAFE, uses while loop, pre-assignement and push, no length used<br>';
// save starting time
$tt = (new Date).getTime();
x = [];
for (i = 0; iterations > i; i++) {
x = concat6(x, document.getElementsByTagName('div'));
}
// output total time
output.innerHTML += ' * 6 ' + (x.length == document.getElementsByTagName('div').length * iterations ? 'PASSED' : 'FAILED') +
' in ' + timeElapsed($tt) + 'ms. SAFE, uses while assigment, pop() recovers the loop outbound copy<br>';
// save starting time
$tt = (new Date).getTime();
x = [];
for (i = 0; iterations > i; i++) {
x = concat7(x, document.getElementsByTagName('div'));
}
// output total time
output.innerHTML += ' * 7 ' + (x.length == document.getElementsByTagName('div').length * iterations ? 'PASSED' : 'FAILED') +
' in ' + timeElapsed($tt) + 'ms. SAFE, uses normal for loop, pre-assignement, pre-increment, augmentation<br>';
// save starting time
$tt = (new Date).getTime();
x = [];
for (i = 0; iterations > i; i++) {
x = concat8(x, document.getElementsByTagName('div'));
}
// output total time
output.innerHTML += ' * 8 ' + (x.length == document.getElementsByTagName('div').length * iterations ? 'PASSED' : 'FAILED') +
' in ' + timeElapsed($tt) + 'ms. SAFE, uses normal for-loop, pre-assignement, offset length pre-increment<br>';
// save starting time
$tt = (new Date).getTime();
x = [];
for (i = 0; iterations > i; i++) {
x = concat9(x, document.getElementsByTagName('div'));
}
// output total time
output.innerHTML += ' * 9 ' + (x.length == document.getElementsByTagName('div').length * iterations ? 'PASSED' : 'FAILED') +
' in ' + timeElapsed($tt) + 'ms. SAFE uses while pre-assignement, output length offset, post-increment<br>';
};
</script>
</head>
<body>
<div id="output"></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment