lijia3

JavaScript performance comparison

Revision 5 of this test case created by

Preparation code

                    <canvas id="board" width="730" height="100"></canvas>
                    <canvas id="board" width="730" height="100"></canvas>
                    <canvas id="backSpace" width="60" height="100"></canvas>
                    <canvas id="cross" width="60" height="100"></canvas>
                    <canvas id="undo" width="60" height="100"></canvas>
      
<script>
Benchmark.prototype.setup = function() {
  var calFunc={
          x: 0,
          y: 0,
          id: 0,
          ctx: null,
          currentXL: 30,
          currentXR: 700,
          initialXL: 30,
          initialY: 90,
          lineWidth: 670,
          guardian: false,
          isBlank: true,
          opacity: 0,
          timer1: 0,
          timer2: 0,
          drawBaseLine: function () {
              var ctx = calFunc.ctx;
              ctx.lineWidth = 2;
              ctx.strokeStyle = "#4D90FE";
              ctx.beginPath();
              ctx.moveTo(calFunc.initialXL, calFunc.initialY);
              ctx.lineTo(calFunc.initialXL + calFunc.lineWidth, calFunc.initialY);
              ctx.stroke();
          },
          fadeInLeft: function (difference) {
              if (calFunc.opacity == 1) return;
              calFunc.opacity -= difference / 30;
              if (calFunc.isBlank) {
                  cal.controlList[0].style.display = "inline";
                  calFunc.isBlank = false;
              }
              if (calFunc.opacity > 1) {
                  calFunc.opacity = 1;
              }
              cal.controlList[0].style.opacity = calFunc.opacity;
          },
          fadeOutLeft: function (difference) {
              if (calFunc.opacity == 0) return;
              calFunc.opacity -= difference / 30;
              if (calFunc.opacity < 0) {
                  calFunc.opacity = 0;
                  cal.controlList[0].style.display = "none";
                  calFunc.isBlank = true;
              }
              cal.controlList[0].style.opacity = calFunc.opacity;
          },
          fadeInRight: function (difference) {
              if (calFunc.opacity == 1) return;
              calFunc.opacity += difference / 30;
              if (calFunc.isBlank) {
                  cal.controlList[2].style.display = "inline";
                  calFunc.isBlank = false;
              }
              if (calFunc.opacity > 1) {
                  calFunc.opacity = 1;
              }
              cal.controlList[2].style.opacity = calFunc.opacity;
          },
          fadeOutRight: function (difference) {
              if (calFunc.opacity == 0) return;
              calFunc.opacity += difference / 30;
              if (calFunc.opacity < 0) {
                  calFunc.opacity = 0;
                  cal.controlList[2].style.display = "none";
                  calFunc.isBlank = true;
              }
              cal.controlList[2].style.opacity = calFunc.opacity;
          },
          moveLeft: function (difference) {
              var ctx = calFunc.ctx;
              if (calFunc.currentXL == 0) {
                  if (calFunc.currentXR - calFunc.currentXL > 400) {
                      calFunc.currentXR += difference;
                      ctx.clearRect(calFunc.currentXR, calFunc.initialY - 1, -difference, 2);
                      //add handler for backspace;
                      calFunc.fadeInLeft(difference);
                  }
                  else {
                      //add handler for erase
                  }
              }
              else {
                  ctx.beginPath();
                  ctx.moveTo(calFunc.currentXL, calFunc.initialY);
                  calFunc.currentXL += difference;
                  calFunc.currentXL = calFunc.currentXL > 0 ? calFunc.currentXL : 0;
                  ctx.lineTo(calFunc.currentXL, calFunc.initialY);
                  ctx.stroke();
                  if (calFunc.currentXR - calFunc.currentXL > calFunc.lineWidth) {
                      calFunc.currentXR += difference;
                      ctx.clearRect(calFunc.currentXR, calFunc.initialY - 1, -difference, 2);
                  }
                  else {
                      calFunc.fadeOutRight(difference);
                  }
              }
          },
          moveRight: function (difference) {
              var ctx = calFunc.ctx;
              if (calFunc.currentXR == 730) {
                  if (calFunc.currentXR - calFunc.currentXL > 400) {
                      ctx.clearRect(calFunc.currentXL, calFunc.initialY - 1, difference, 2);
                      calFunc.currentXL += difference;
                      calFunc.fadeInRight(difference);
                  }
              }
              else {
                  ctx.beginPath();
                  ctx.moveTo(calFunc.currentXR, calFunc.initialY);
                  calFunc.currentXR += difference;
                  calFunc.currentXR = calFunc.currentXR > 730 ? 730 : calFunc.currentXR;
                  ctx.lineTo(calFunc.currentXR, calFunc.initialY);
                  ctx.stroke();
                  if (calFunc.currentXR - calFunc.currentXL > calFunc.lineWidth) {
                      ctx.clearRect(calFunc.currentXL, calFunc.initialY - 1, difference, 2);
                      calFunc.currentXL += difference;
                  }
                  else {
                      calFunc.fadeOutLeft(difference);
                  }
              }
          },
          listener: function (e) {
              if (calFunc.id != e.pointerId) return;
              var difference = Math.floor(e.pageX - calFunc.x);
              if (difference < 0) {
                  calFunc.moveLeft(difference);
              }
              else if (difference > 0) {
                  calFunc.moveRight(difference);
              }
              calFunc.x += difference;
          },
          determine: function (e) {
              if (calFunc.guardian) return;
              calFunc.guardian = true;
              calFunc.x = e.pageX;
              calFunc.id = e.pointerId;
              calFunc.ctx.strokeStyle = "#4D90FE";
              calFunc.ctx.lineWidth = 2;
              if (true) {
                  document.addEventListener("MSPointerMove", calFunc.listener, false);
                  document.addEventListener("MSPointerUp", calFunc.stop, false);
                  document.removeEventListener("keydown", cal.inputHandler, false);
              }
              else {
                  calFunc.updateCursor();
              }
          },
          stop: function (e) {
              if (calFunc.id != e.pointerId) return;
              document.removeEventListener("MSPointerMove", calFunc.listener, false);
              document.removeEventListener("MSPointerUP", calFunc.stop, false);
              //clearTimeout(calFunc.timer1);
              //clearTimeout(calFunc.timer2);
              if (calFunc.currentXL < 30) {
                  calFunc.returnFromLeft();
              }
              else if (calFunc.currentXL > 30) {
                  calFunc.returnFromRight();
              }
              else {
                  calFunc.guardian = false;
              }
          },
          returnFromLeft: function () {
              calFunc.moveRight(10);
              if (calFunc.currentXL > 20) {
                  calFunc.fadeOutLeft(calFunc.opacity * 31);
                  calFunc.moveRight(calFunc.currentXL - 30);
                  calFunc.guardian = false;
                  document.addEventListener("keydown", cal.inputHandler, false);
              }
              else {
                  requestAnimationFrame(calFunc.returnFromLeft);
              }
          },
          returnFromRight: function () {
              calFunc.moveLeft(-10);
              if (calFunc.currentXL < 40) {
                  calFunc.fadeOutRight(-calFunc.opacity * 31);
                  calFunc.moveLeft(30 - calFunc.currentXL);
                  calFunc.guardian = false;
                  clearInterval(calFunc.timer);
              }
              else {
                  requestAnimationFrame(calFunc.returnFromRight);
              }
          },
          updateCursor: function () {
          },
          initialization: function () {
              calFunc.ctx = board.getContext("2d");
              calFunc.drawBaseLine();
              board.addEventListener("MSPointerDown", calFunc.determine, false);
          }
      }
  var cal=new Object();
  cal.controlList = [backSpace, cross, undo];
  calFunc.initialization()

};
</script>

Preparation code output

<canvas id="board" width="730" height="100"></canvas> <canvas id="board" width="730" height="100"></canvas> <canvas id="backSpace" width="60" height="100"></canvas> <canvas id="cross" width="60" height="100"></canvas> <canvas id="undo" width="60" height="100"></canvas>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
1
calFunc.moveLeft(-10);
pending…
2
calFunc.moveRight(10);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments