Create object outside of loop.
<!DOCTYPE html>
<html>
<head>
<title>js perf</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta charset="utf-8"/>
<script src="board.js"></script>
<script src="perf.js"></script>
<style>
body {
width: 100%;
}
h1, div.area {
text-align: center;
margin: 10px auto;
}
#board {
margin: 10px auto;
}
#board td {
width: 40px;
height: 40px;
border: 1px solid red;
margin: 0;
text-align: center;
}
.test {
border: 1px red dotted;
}
.report {
border: 1px green dotted;
}
</style>
</head>
<body>
<table id="board">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div class="test">
<button>Array vs 2d Array vs Object vs this Object</button>
<div class="report"></div>
</div>
<script>
var boardDom = document.getElementById("board");
var ui = {};
ui.set = function(i, j, val) {
boardDom.querySelectorAll("tr")[i].querySelectorAll("td")[j].innerHTML = val;
}
</script>
<script>
/* var N = 1; */
/* var N = 1000*1000; */
var N = 1000*1000;
function arrPrint(brd) {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
ui.set(i, j, brd[i][j]);
}
}
}
/* Example of plain performance calculation. */
// var tsFrom = new Date().getTime();
// var i;
// (function() {
// var brd = new BoardArr();
// for (i = 0; i < N; i++) {
// brd = brd.copy();
// }
// })();
// var tsTo = new Date().getTime();
// console.log("BoardArr.prototype.copy|new: %f ms, %d u/s", tsTo-tsFrom, 2*i/(tsTo - tsFrom)*1000);
perf("BoardArr.prototype.copy|new", function() {
this.brd = this.brd.copy();
}, N, {brd: new BoardArr()});
perf("BoardArr2d.prototype.copy|new", function() {
this.brd = this.brd.copy();
}, N, {brd: new BoardArr2d()});
perf("BoardObj.prototype.copy|new", function() {
this.brd = this.brd.copy();
}, N, {brd: new BoardObj()});
perf("BoardArr.prototype.copy|from-to", function() {
this.from.copy(this.to);
}, N, {from: new BoardArr(), to: new BoardArr()});
perf("BoardArr2d.prototype.copy|from-to", function() {
this.from.copy(this.to);
}, N, {from: new BoardArr2d(), to: new BoardArr2d()});
perf("BoardObj.prototype.copy|from-to", function() {
this.from.copy(this.to);
}, N, {from: new BoardObj(), to: new BoardObj()});
perf("BoardArr2d.prototype.shiftLeft_unrolled", function() {
this.from.shiftLeft_unrolled(this.to);
var swap = this.from; this.from = this.to, this.to = swap;
}, N, {from: new BoardArr2d(), to: new BoardArr2d()});
perf("BoardArr2d.prototype.shiftLeft_mostly_unrolled", function() {
this.from.shiftLeft_mostly_unrolled(this.to);
var swap = this.from; this.from = this.to, this.to = swap;
}, N, {from: new BoardArr2d(), to: new BoardArr2d()});
</script>
<script>
/* console.log(Array.prototype.map.call(document.querySelectorAll("button"), function(x){return x;})); */
Array.prototype.forEach.call(document.querySelectorAll("button"), function(btn) {
console.log(btn)
});
</script>
</body>
</html>