lijia3

JavaScript performance comparison

Revision 5 of this test case created

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

Test runner

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

Java applet disabled.

Testing in unknown unknown
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. Here’s a list of current revisions for this page:

0 comments

Add a comment