v0.3 CHANGES.
<!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 arrNew() {
return [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
}
function arrGet(brd, i, j) {
return brd[i*4+j];
}
function arrSet(brd, i, j, val) {
brd[i*4+j] = val;
}
function arrPrint(brd) {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
ui.set(i, j, brd[i*4+j]);
}
}
}
function arrRotLeft(from, to) {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 3; j++) {
to[i*4+j+1] = from[i*4+j];
}
to[i*4] = from[i*4+3];
}
}
function arrRotLeft_2(from, to) {
to[1] = from[0]; to[2] = from[1]; to[3] = from[2]; to[0] = from[3];
to[4+1] = from[4+0]; to[4+2] = from[4+1]; to[4+3] = from[4+2]; to[4+0] = from[4+3];
to[8+1] = from[8+0]; to[8+2] = from[8+1]; to[8+3] = from[8+2]; to[8+0] = from[8+3];
to[12+1] = from[12+0]; to[12+2] = from[12+1]; to[12+3] = from[12+2]; to[12+0] = from[12+3];
}
var L = arrNew();
L[2*4+3] = 5;
for (var i = 0; i < 4; i++) {
arrSet(L, i, 3-i, i+1);
}
var R = arrNew();
/* Example of plain performance calculation. */
var tsFrom = new Date().getTime();
for (var i = 0; i < N; i++) {
arrRotLeft(L, R);
arrRotLeft(R, L);
}
var tsTo = new Date().getTime();
arrPrint(L);
console.log("arrRotLeft: %f ms, %d u/s", tsTo-tsFrom, 2*i/(tsTo - tsFrom)*1000);
perf("arrRotLeft", function() {
arrRotLeft(this.L, this.R);
arrRotLeft(this.R, this.L);
}, N, {L: L, R: R});
arrPrint(L);
perf("arrRotLeft_2", function() {
arrRotLeft_2(this.L, this.R);
arrRotLeft_2(this.R, this.L);
}, N, {L: L, R: R});
arrPrint(L);
perf("BoardArr.prototype.copy|new", function() {
this.brd = this.brd.copy();
}, N, {brd: new BoardArr()});
perf("BoardArr.prototype.copy|from-to", function() {
this.from.copy(this.to);
}, N, {from: new BoardArr(), to: new BoardArr()});
perf("BoardArr2d.prototype.copy|new", function() {
this.brd = this.brd.copy();
}, N, {brd: new BoardArr2d()});
perf("BoardArr2d.prototype.copy|from-to", function() {
this.from.copy(this.to);
}, N, {from: new BoardArr2d(), to: new BoardArr2d()});
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()});
function arr2New() {
return [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
}
function arr2Get(brd, i, j) {
return brd[i][j];
}
function arr2Set(brd, i, j, val) {
brd[i][j] = val;
}
function arr2Print(brd) {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
ui.set(i, j, brd[i][j]);
}
}
}
function arr2RotLeft(from, to) {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 3; j++) {
to[i][j+1] = from[i][j];
}
to[i][0] = from[i][3];
}
}
function arr2RotLeft_2(from, to) {
to[0][1] = from[0][0]; to[0][2] = from[0][1]; to[0][3] = from[0][2]; to[0][0] = from[0][3];
to[1][1] = from[1][0]; to[1][2] = from[1][1]; to[1][3] = from[1][2]; to[1][0] = from[1][3];
to[2][1] = from[2][0]; to[2][2] = from[2][1]; to[2][3] = from[2][2]; to[2][0] = from[2][3];
to[3][1] = from[3][0]; to[3][2] = from[3][1]; to[3][3] = from[3][2]; to[3][0] = from[3][3];
}
function arr2ShiftRight(from, to) {
for (var i = 0; i < 4; i++) {
if (from[i][2] == from[i][3]) {
to[i][3] = from[i][3] + 1;
if (from[i][0] == from[i][1]) {
to[i][2] = from[i][1] + 1;
to[i][1] = 0;
} else {
to[i][2] = from[i][1];
to[i][1] = from[i][0];
}
to[i][0] = 0;
} else {
to[i][3] = from[i][3];
if (from[i][1] == from[i][2]) {
to[i][2] = from[i][2] + 1;
to[i][1] = from[i][0];
to[i][0] = 0;
} else {
to[i][2] = from[i][2];
if (from[i][0] == from[i][1]) {
to[i][1] = from[i][1] + 1;
to[i][0] = 0;
} else {
to[i][1] = from[i][1];
to[i][0] = from[i][0];
}
}
}
}
}
function arr2ShiftLeft(from, to) {
for (var i = 3; i >= 0; i--) {
if (from[i][0] == from[i][1]) {
to[i][0] = from[i][0] + 1;
if (from[i][2] == from[i][3]) {
to[i][1] = from[i][2] + 1;
to[i][2] = 0;
} else {
to[i][1] = from[i][2];
to[i][2] = from[i][3];
}
to[i][3] = 0;
} else {
to[i][0] = from[i][0];
if (from[i][1] == from[i][2]) {
to[i][1] = from[i][1] + 1;
to[i][2] = from[i][3];
to[i][3] = 0;
} else {
to[i][1] = from[i][1];
if (from[i][2] == from[i][3]) {
to[i][2] = from[i][2] + 1;
to[i][3] = 0;
} else {
to[i][2] = from[i][2];
to[i][3] = from[i][3];
}
}
}
}
}
function arr2ShiftUp(from, to) {
for (var j = 3; j >= 0; j--) {
if (from[0][j] == from[1][j]) {
to[0][j] = from[0][j] + 1;
if (from[2][j] == from[3][j]) {
to[1][j] = from[2][j] + 1;
to[2][j] = 0;
} else {
to[1][j] = from[2][j];
to[2][j] = from[3][j];
}
to[3][j] = 0;
} else {
to[0][j] = from[0][j];
if (from[1][j] == from[2][j]) {
to[1][j] = from[1][j] + 1;
to[2][j] = from[3][j];
to[3][j] = 0;
} else {
to[1][j] = from[1][j];
if (from[2][j] == from[3][j]) {
to[2][j] = from[2][j] + 1;
to[3][j] = 0;
} else {
to[2][j] = from[2][j];
to[3][j] = from[3][j];
}
}
}
}
}
function arr2ShiftDown(from, to) {
for (var j = 0; j < 4; j++) {
if (from[2][j] == from[3][j]) {
to[3][j] = from[3][j] + 1;
if (from[0][j] == from[1][j]) {
to[2][j] = from[1][j] + 1;
to[1][j] = 0;
} else {
to[2][j] = from[1][j];
to[1][j] = from[0][j];
}
to[0][j] = 0;
} else {
to[3][j] = from[3][j];
if (from[1][j] == from[2][j]) {
to[2][j] = from[2][j] + 1;
to[1][j] = from[0][j];
to[0][j] = 0;
} else {
to[2][j] = from[2][j];
if (from[0][j] == from[1][j]) {
to[1][j] = from[1][j] + 1;
to[0][j] = 0;
} else {
to[1][j] = from[1][j];
to[0][j] = from[0][j];
}
}
}
}
}
var L = arr2New();
L[2][3] = 5;
for (var i = 0; i < 4; i++) {
arr2Set(L, i, 3-i, i+1);
}
var R = arr2New();
var tsFrom = new Date().getTime();
for (var i = 0; i < N; i++) {
arr2RotLeft(L, R);
arr2RotLeft(R, L);
}
var tsTo = new Date().getTime();
/* arr2Print(L); */
console.log("arr2RotLeft: %f ms, %d u/s", tsTo-tsFrom, 2*i/(tsTo - tsFrom)*1000);
var tsFrom = new Date().getTime();
for (var i = 0; i < N; i++) {
arr2RotLeft_2(L, R);
arr2RotLeft_2(R, L);
}
var tsTo = new Date().getTime();
/* arr2Print(L); */
console.log("arr2RotLeft_2: %f ms, %d u/s", tsTo-tsFrom, 2*i/(tsTo - tsFrom)*1000);
var objMap = [["aa", "ab", "ac", "ad"], ["ba", "bb", "bc", "bd"], ["ca", "cb", "cc", "cd"], ["da", "db", "dc", "dd"]];
function objNew() {
return { aa: 0, ab: 0, ac: 0, ad: 0,
ba: 0, bb: 0, bc: 0, bd: 0,
ca: 0, cb: 0, cc: 0, cd: 0,
da: 0, db: 0, dc: 0, dd: 0 };
}
function objGet(brd, i, j) {
return brd[objMap[i][j]];
}
function objSet(brd, i, j, val) {
brd[objMap[i][j]] = val;
}
function objPrint(brd) {
ui.set(0, 0, brd.aa); ui.set(0, 1, brd.ab); ui.set(0, 2, brd.ac); ui.set(0, 3, brd.ad);
ui.set(1, 0, brd.ba); ui.set(1, 1, brd.bb); ui.set(1, 2, brd.bc); ui.set(1, 3, brd.bd);
ui.set(2, 0, brd.ca); ui.set(2, 1, brd.cb); ui.set(2, 2, brd.cc); ui.set(2, 3, brd.cd);
ui.set(3, 0, brd.da); ui.set(3, 1, brd.db); ui.set(3, 2, brd.dc); ui.set(3, 3, brd.dd);
}
function objRotLeft(from, to) {
to.ab = from.aa; to.ac = from.ab; to.ad = from.ac; to.aa = from.ad;
to.bb = from.ba; to.bc = from.bb; to.bd = from.bc; to.ba = from.bd;
to.cb = from.ca; to.cc = from.cb; to.cd = from.cc; to.ca = from.cd;
to.db = from.da; to.dc = from.db; to.dd = from.dc; to.da = from.dd;
}
function objRotLeft_2(from, to) {
to["ab"] = from["aa"]; to["ac"] = from["ab"]; to["ad"] = from["ac"]; to["aa"] = from["ad"];
to["bb"] = from["ba"]; to["bc"] = from["bb"]; to["bd"] = from["bc"]; to["ba"] = from["bd"];
to["cb"] = from["ca"]; to["cc"] = from["cb"]; to["cd"] = from["cc"]; to["ca"] = from["cd"];
to["db"] = from["da"]; to["dc"] = from["db"]; to["dd"] = from["dc"]; to["da"] = from["dd"];
}
var L = objNew();
L.cd = 5;
for (var i = 0; i < 4; i++) {
objSet(L, i, 3-i, i+1);
}
var R = objNew();
var tsFrom = new Date().getTime();
for (var i = 0; i < N; i++) {
objRotLeft(L, R);
objRotLeft(R, L);
}
var tsTo = new Date().getTime();
objPrint(L);
console.log("objRotLeft: %f ms, %d u/s", tsTo-tsFrom, 2*i/(tsTo - tsFrom)*1000);
var tsFrom = new Date().getTime();
for (var i = 0; i < N; i++) {
objRotLeft_2(L, R);
objRotLeft_2(R, L);
}
var tsTo = new Date().getTime();
objPrint(L);
console.log("objRotLeft_2: %f ms, %d u/s", tsTo-tsFrom, 2*i/(tsTo - tsFrom)*1000);
</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>