lijia3

JavaScript performance comparison

Revision 4 of this test case created

Preparation code

<canvas id="board" width="700">
<script>
  Benchmark.prototype.setup = function() {
        var calFunc={
            x: 0,
            y: 0,
            id: 0,
            ctx: null,
            currentXL: 30,
            currentXR: 700,
            initialXL: 30,
            initialXR: 700,
            initialY: 90,
            lineWidth: 670,
            guardian: false,
            isArrowVisible: false,
            isCrossVisible: false,
            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.initialXR, calFunc.initialY);
                ctx.stroke();
            },
            move: function (x) {
                var difference = Math.floor(x - calFunc.x);
                var ctx = calFunc.ctx;
                if (difference < 0) {
                    if (calFunc.currentXL + difference > 0) {
                        ctx.beginPath();
                        ctx.moveTo(calFunc.currentXL, calFunc.initialY);
                        calFunc.currentXL += difference;
                        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 {
                        if (calFunc.currentXL != 0) {
                            ctx.beginPath();
                            ctx.moveTo(calFunc.currentXL, calFunc.initialY);
                            calFunc.currentXL = 0;
                            ctx.lineTo(calFunc.currentXL, calFunc.initialY);
                            ctx.stroke();
                        }
                        else if (calFunc.currentXR - calFunc.currentXL > 500) {
                            calFunc.currentXR += difference;
                            ctx.clearRect(calFunc.currentXR, calFunc.initialY - 1, -difference, 2);
    
                        }
                    }
                }
                else {
                    if (calFunc.currentXR + difference < 730) {
                        ctx.beginPath();
                        ctx.moveTo(calFunc.currentXR, calFunc.initialY);
                        calFunc.currentXR += difference;
                        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 {
                        if (calFunc.currentXR != 730) {
                            ctx.beginPath();
                            ctx.moveTo(calFunc.currentXR, calFunc.initialY);
                            calFunc.currentXR = 730;
                            ctx.lineTo(calFunc.currentXR, calFunc.initialY);
                        }
                        else if (calFunc.currentXL < 300) {
                            ctx.clearRect(calFunc.currentXL, calFunc.initialY - 1, difference, 2);
                            calFunc.currentXL += difference;
                        }
                    }
                }
                calFunc.x = x;
            },
            move2: function (x) {
                var difference = Math.floor(x - calFunc.x);
                var ctx = calFunc.ctx;
                ctx.clearRect(calFunc.currentXL, calFunc.initialY - 1, calFunc.lineWidth, 2);
                if (difference + calFunc.currentXL < 0) {
                    calFunc.currentXL = 0;
                    if (calFunc.lineWidth > 500)
                        calFunc.lineWidth += difference;
                }
                else {
                    calFunc.currentXL += difference;
                }
                ctx.beginPath();
                ctx.moveTo(calFunc.currentXL, calFunc.initialY);
                ctx.lineTo(calFunc.currentXL + calFunc.lineWidth, calFunc.initialY);
                ctx.stroke();
                calFunc.x = x;
            },
            listener: function (e) {
                if (calFunc.id != e.pointerId) return;
                calFunc.move2(e.pageX);
            },
            determine: function (e) {
                if (calFunc.guardian) return;
                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();
                }
                calFunc.guardian = true;
            },
            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.guardian = false;
                    return;
                }
                if (calFunc.currentXL < 30) {
                    calFunc.returnFromLeft();
                }
                else {
                    calFunc.returnFromRight();
                }
            },
            returnFromLeft: function () {
                calFunc.move(calFunc.x + 10);
                if (calFunc.currentXL > 20) {
                    calFunc.move(calFunc.x + 30 - calFunc.currentXL);
                    if (calFunc.isArrowVisible) {
                        WinJS.UI.Animation.fadeOut(func1);
                        calFunc.isArrowVisible = false;
                        cal.list[cal.focus].delete();
                        if (calFunc.isCrossVisible) {
                            calFunc.isCrossVisible = false;
                        }
                    }
                    else if (calFunc.isCrossVisible) {
                        WinJS.UI.Animation.fadeOut(func2);
                        cal.list[cal.focus].data = "";
                        cal.list[cal.focus].clear();
                        cal.list[cal.focus].where = 0;
                        calFunc.isCrossVisible = false;
                    }
                    calFunc.guardian = false;
                    document.addEventListener("keydown", cal.inputHandler, false);
                }
                else {
                    requestAnimationFrame(calFunc.returnFromLeft);
                }
            },
            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 {
                    requestAnimationFrame(calFunc.returnFromRight);
                }
            },
            updateCursor: function () {
            },
            initialization: function () {
                calFunc.ctx = board.getContext("2d");
                calFunc.drawBaseLine();
                board.addEventListener("MSPointerDown", calFunc.determine, false);
            }
        }
    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.move(100);
 pending…
2
 
calFunc.move2(100);
 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