lijia3

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

<canvas id="board" width="700" height="100">
<script>
  Benchmark.prototype.setup = function() {
    var value=[110,120,130,140,150,140,100,80,70,50];
    var index=0;
    window.calFunc= {
            x: 0,
            y: 0,
            id: 0,
            timer: 0,
            currentXL: 30,
            currentXR: 700,
            initialX: 30,
            initialY: 100,
            lineWidth: 670,
            guardian: false,
            bcState: true,
            drawBaseLine: function () {
                var ctx = board.getContext("2d");
                ctx.lineWidth = 4;
                ctx.strokeStyle = "#4D90FE";
                ctx.beginPath();
                ctx.moveTo(calFunc.initialX, calFunc.initialY);
                ctx.lineTo(calFunc.initialX + calFunc.lineWidth, calFunc.initialY);
                ctx.stroke();
            },
            xdxd:function(x){
    var asd=calFunc;
    var y=asd.y;
    var currentXL=asd.currentXL;
                 var difference = Math.floor(x - asd.x);
                 var ctx = asd.ctx;
                 ctx.clearRect(currentXL,y,670,1);
    currentXL-=difference;
    ctx.beginPath();
    ctx.moveTo(currentXL,y);
    ctx.lineTo(currentXL+670,y);
    ctx.stroke();
            },
    ctx:board.getContext("2d"),
    move2: function (x) {
    
                var difference = Math.floor(x - calFunc.x);
                var ctx = calFunc.ctx;
                if (difference < 0) {
                    if (calFunc.currentXL + difference > 0) {
                        ctx.strokeStyle = "#4D90FE";
                        ctx.beginPath();
                        ctx.moveTo(calFunc.currentXL, calFunc.initialY);
                        calFunc.currentXL += difference;
                        ctx.lineTo(calFunc.currentXL, calFunc.initialY);
                        ctx.stroke();
                    }
                    if ((calFunc.currentXL + difference < 0 && calFunc.currentXR - calFunc.currentXL > 500) ||
                        calFunc.currentXR - calFunc.currentXL > calFunc.lineWidth) {
                        ctx.strokeStyle = "white";
                        ctx.beginPath();
                        ctx.moveTo(calFunc.currentXR, calFunc.initialY);
                        calFunc.currentXR += difference;
                        ctx.lineTo(calFunc.currentXR, calFunc.initialY);
                        ctx.stroke();
                    }
    
                }
                else {
                    if (calFunc.currentXR + difference < 730) {
                        ctx.strokeStyle = "#4D90FE";
                        ctx.beginPath();
                        ctx.moveTo(calFunc.currentXR, calFunc.initialY);
                        calFunc.currentXR += difference;
                        ctx.lineTo(calFunc.currentXR, calFunc.initialY);
                        ctx.stroke();
                    }
                    if (calFunc.currentXL < 300 && calFunc.currentXL + calFunc.currentXR > calFunc.lineWidth) {
                        ctx.strokeStyle = "white";
                        ctx.beginPath();
                        ctx.moveTo(calFunc.currentXL, calFunc.initialY);
                        calFunc.currentXL += difference;
                        ctx.lineTo(calFunc.currentXL, calFunc.initialY);
                        ctx.stroke();
                    }
                }
                calFunc.x = x;
            },
            move1: function (x) {
                var difference = Math.floor(x - calFunc.x);
                var ctx = board.getContext("2d");
                if (difference < 0) {
                    if (calFunc.currentXL + difference > 0) {
                        ctx.strokeStyle = "#4D90FE";
                        ctx.beginPath();
                        ctx.moveTo(calFunc.currentXL, calFunc.initialY);
                        calFunc.currentXL += difference;
                        ctx.lineTo(calFunc.currentXL, calFunc.initialY);
                        ctx.stroke();
                    }
                    if ((calFunc.currentXL + difference < 0 && calFunc.currentXR - calFunc.currentXL > 500) ||
                        calFunc.currentXR - calFunc.currentXL > calFunc.lineWidth) {
                        ctx.strokeStyle = "white";
                        ctx.beginPath();
                        ctx.moveTo(calFunc.currentXR, calFunc.initialY);
                        calFunc.currentXR += difference;
                        ctx.lineTo(calFunc.currentXR, calFunc.initialY);
                        ctx.stroke();
                    }
    
                }
                else {
                    if (calFunc.currentXR + difference < 730) {
                        ctx.strokeStyle = "#4D90FE";
                        ctx.beginPath();
                        ctx.moveTo(calFunc.currentXR, calFunc.initialY);
                        calFunc.currentXR += difference;
                        ctx.lineTo(calFunc.currentXR, calFunc.initialY);
                        ctx.stroke();
                    }
                    if (calFunc.currentXL < 300 && calFunc.currentXL + calFunc.currentXR > calFunc.lineWidth) {
                        ctx.strokeStyle = "white";
                        ctx.beginPath();
                        ctx.moveTo(calFunc.currentXL, calFunc.initialY);
                        calFunc.currentXL += difference;
                        ctx.lineTo(calFunc.currentXL, calFunc.initialY);
                        ctx.stroke();
                    }
                }
                calFunc.x = x;
            },
            listener: function (e) {
                if (calFunc.id != e.pointerId) return;
                calFunc.move(e.pageX);
            },
            determine: function (e) {
                if (calFunc.guardian) return;
                calFunc.id = e.pointerId;
                calFunc.x = e.pageX;
                if (calFunc.x > 400) {
                    document.addEventListener("MSPointerMove", calFunc.listener, false);
                    document.addEventListener("MSPointerUp", calFunc.stop, false);
                }
                else {
                    calFunc.updateCursor();
                    calFunc.y = e.offsetY;
                }
                calFunc.guardian = true;
            },
            returnFromLeft: function () {
                calFunc.move(calFunc.x + 10);
                if (calFunc.currentXL > 20) {
                    calFunc.move(calFunc.x + 30 - calFunc.currentXL);
                    calFunc.guardian = false;
                }
                else {
                    setTimeout(calFunc.returnFromLeft, 50);
                }
            },
            returnFromRight: function () {
                calFunc.move(calFunc.x - 10);
                if (calFunc.currentXL < 40) {
                    calFunc.move(calFunc.x + 30 - calFunc.currentXL);
                    calFunc.guardian = false;
                    clearInterval(calFunc.timer);
                }
                else {
                    setTimeout(calFunc.returnFromRight, 50);
                }
            },
            stop: function (e) {
                if (calFunc.id != e.pointerId) return;
                document.removeEventListener("MSPointerMove", calFunc.listener, false);
                document.removeEventListener("MSPointerUP", calFunc.stop, false);
                if (calFunc.currentXL == 30) {
                    calFunc.guardian = false;
                    return;
                }
                if (calFunc.currentXL < 30) {
                    calFunc.returnFromLeft();
                }
                else {
                    calFunc.returnFromRight();
                }
            },
            backSpace: function () {
                var ctx = func1.getContext("2d");
                ctx.lineWidth = 4;
                ctx.lineCap = "round";
                ctx.strokeStyle = "#5E5E5E";
                ctx.beginPath();
                ctx.moveTo(17, 35);
                ctx.lineTo(2, 49);
                ctx.moveTo(2, 50);
                ctx.lineTo(42, 50);
                ctx.moveTo(2, 51);
                ctx.lineTo(17, 65);
                ctx.stroke();
            },
            cross: function () {
                var ctx = func2.getContext("2d");
                ctx.lineWidth = 4;
                ctx.strokeStyle = "#5E5E5E";
                ctx.beginPath();
                ctx.moveTo(0, 30);
                ctx.lineTo(42, 70);
                ctx.moveTo(42, 30);
                ctx.lineTo(0, 70);
                ctx.stroke();
            },
            reveal: function () {
                if (calFunc.bcState) {
                    WinJS.UI.Animation.fadeIn(func1);
                    WinJS.UI.Animation.fadeIn(func2);
                    calFunc.timer = setTimeout(calFunc.hide, 2000);
                    calFunc.bcState = false;
                }
                else {
                    clearTimeout(calFunc.timer);
                    calFunc.timer = setTimeout(calFunc.hide, 2000);
                }
            },
            hide: function () {
                WinJS.UI.Animation.fadeOut(func1);
                WinJS.UI.Animation.fadeOut(func2);
                calFunc.bcState = true;
            },
            updateCursor: function () {
            },
            initialization: function () {
                calFunc.drawBaseLine();
                calFunc.cross();
                calFunc.backSpace();
                board.addEventListener("MSPointerDown", calFunc.determine, false);
            }
        }
    calFunc.x=100;
  };
</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.xdxd(90);
 pending…
2
 
calFunc.move2(90);
 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