perf.html
author Oleksandr Gavenko <gavenkoa@gmail.com>
Fri, 26 Sep 2014 01:33:34 +0300
changeset 147 d4f9433e30b9
parent 93 c2bf15c3b80b
permissions -rw-r--r--
Use proper name for incoming argument.

<!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>