lijia3

JavaScript performance comparison

Revision 27 of this test case created

Preparation code

                <canvas id="board" width="730" height="100"></canvas>
<script>
  Benchmark.prototype.setup = function() {
        function unit(content, type) {
            this.content = content;
            this.type = type;
            this.width = new Array();
            this.pre = null;
            this.next = null;
        }
        unit.prototype.add = function (str, where) {
            if (where == this.content.length) {
                this.content += str;
            }
            else if (where == 0) {
                this.content = str + this.content;
            }
            else {
                this.content = this.content.substring(0, where) +
                    str + this.content.substring(where);
            }
        }
        unit.prototype.push = function (content, type) {
            var temp = new unit(content, type);
            temp.pre = this;
            if (this.next != null) {
                temp.next = this.next;
                temp.next.pre = temp;
            }
            this.next = temp;
            return this.next;
        }
        unit.prototype.unshift = function (content, type) {
            var temp = new unit(content, type);
            temp.next = this;
            if (this.pre != null) {
                temp.pre = this.pre;
                temp.pre.next = temp;
            }
            this.pre = temp;
            return this.pre;
        }
        unit.prototype.divide = function (content, type, where) {
            var temp = this.push(content, type);
            temp.push(this.content.substring(where), this.type);
            this.content = this.content.substring(0, where);
            return temp;
        }
        unit.getType = function (code) {
            if (code >= 48 && code <= 57 || code == 46) {
                return 1;
            }
            else if (code >= 97 && code <= 122) {
                return 2;
            }
            else if (code == 94) {
                return -2;
            }
            else {
                return 0;
            }
        }   
     function Graphics() {
            this.target = null;
            this.compass = null;
            this.context = new Array();
            this.counter = new Array();
            this.color = "#5E5E5E";
            this.rightBound = 10;
            this.data = new unit("$", -1);
            this.start = this.data;
            this.where = 1;
        }
        Graphics.prototype.initialization = function (ctx, x, y, size, color) {
            this.target = ctx ? ctx : this.target;
            this.compass = { x: x > 0 ? x : 10, y: y > 0 ? y : 70, size: size > 0 ? size : 50 };
            this.color = color ? color : "#5E5E5E";
            this.target.fillStyle = this.color;
            this.target.font = this.compass.size + "px times";
        }
        Graphics.prototype.add = function (input) {//systematic storage!
            var type = unit.getType(input.charCodeAt(0));
            if (this.data.type > 0 && type == this.data.type) {
                this.data.add(input, this.where);
                this.where++;
            }
            else {
                if (this.where == this.data.content.length) {
                    this.data = this.data.push(input, type);
                }
                else if (this.where == 0) {
                    this.data = this.data.unshift(input, type);
                }
                else if (this.data.type == 0) {
                    this.data = this.data.divide(input, type, this.where);
                }
                this.where = 1;
            }
            if (this.check()) this.output(input);
            //attempt to evaluate expression
        }
        Graphics.prototype.check = function () {//reset content to a number adding new field value
            if (this.data.content == '^') {
                this.data.push(":", -1);
                this.context[this.context.length] = this.data;
                this.counter[this.counter.length] = 0;
                return false;
            }
            else if (this.data.content == "log") {
                this.data.type = -3;
                this.data.push(":", -3);
                this.context[this.context.length] = this.data;
                this.counter[this.counter.length] = 0;
                return true;
            }
            else if (this.data.content == "sqrt") {
                this.data.type = -4;
                this.data.width = [0, 0];
                this.data.push(":", -1);
                this.data.next.push(":", -1);
                this.context[this.context.length] = this.data;
                this.counter[this.counter.length] = 0;
                return false;
            }
            else if (this.data.content == "slash") {
                this.data.type = -5;
                this.data.width = [0, 0];
                this.data.push(":", -1);
                this.data.next.push(":", -1);
                this.context[this.context.length] = this.data;
                this.counter[this.counter.length] = 0;
    
            }
            return true;
        }
        Graphics.prototype.output = function (input) {
            var compass = this.compass;
            var width = this.target.measureText(input).width;
            this.data.width += width;
            for (var i = 0; i < this.context.length; i++) {
                this.context[i].width[this.counter[i]] += width;
            }
            /*if (this.context.length > 0 && this.context[this.context.length - 1].content == "slash") {
                var container = this.context[this.context.length - 1];
                if (container.where == 0 &&
                    container.children[0].width + width <= container.children[1].width) {
                    this.clear(this.x, 0, container.children[0].width, 80); // need proper algorithm
                    this.paint(container, container.children[0]);
                    return;
                }
                if (container.where == 1 &&
                    container.children[1].width + width <= container.children[0].width) {
                    this.clear(this.x, 0, container.children[0].width, 80); // need proper algorithm
                    this.paint(container.children[0], container.children[1]);
                    return;
                }
            }*/
            this.clear(compass.x, 0, this.rightBound - compass.x, 80);
            this.drawText(compass, input, width);
            if (this.where != this.data.content.length) {
                var str = this.data.content.substring(this.where);
                this.drawText(compass, str, 0);
            }
            this.paint(this.data.next, null);
        }
        Graphics.prototype.onStyleChange = function (target, which) {
        }
        Graphics.prototype.onCheckPoint = function (target, which, where) {
            var nearest = context[context.length - 1];
            counter[counter.length - 1]++;
            if (nearest.type > -4) {
                counter.length--;
                context.length--;
            }
            else if (nearest.type == -4) {
                if (counter[counter.length - 1] == 1) {
                    this.target.fillText(start.onStyleChange.value, compass.x, compass.y);
                    compass += this.target.measureText(start.onStyleChange.value).width;
                }
                else {
                    this.target.moveTo(nearest.compass.x, nearest.compass.y);
                    this.target.lineTo(compass.x, compass.y);
                    this.target.stroke();
                    counter.length--;
                    context.length--;
                }
            }
            else {
                if (counter[counter.length - 1] == 1) {
    
                }
                else {
                    this.target.stroke();
                    counter.length--;
                    context.length--;
                }
            }
        }
        Graphics.prototype.changeStyle = function (target, model) {
            if (model.x != -1) target.x = model.x;
            target.y = model.y;
            target.size = model.size;
            this.target.font = target.size + "px times";
        }
        Graphics.prototype.paint = function (start, end) {
            var compass = { x: this.compass.x, y: this.compass.y, size: this.compass.size };
            var context = this.context.slice(0);
            var counter = this.context.slice(0);
            while (start != null) {//prevent unnecessary reflow
                if (start.type > -1) {
                    this.target.fillText(this.data.content, compass.x, compass.y);
                    compass += this.data.width;
                }
                else if (start.type = -1) {
                    counter[counter.length - 1]++;
                    this.onCheckPoint(compass, context[context.length - 1], counter[counter.length - 1]);
                }
                else {
    
                }
                start = start.next;
            }
            this.target.font = this.compass.size + "px times";//move back!
        }
        Graphics.prototype.drawText = function (target, str, width) {
            var compass = this.compass;
            this.target.fillText(str, compass.x, compass.y);
            compass.x += width;
            this.rightBound += width;
        }
        Graphics.prototype.clear = function (x, y, width, height) {
            if (width == 0) return;
            this.compass.x = x;
            this.target.clearRect(x, y, width, height);
        }
        Graphics.prototype.delete = function () {
        }
        Graphics.prototype.moveLeft = function () {
            this.where--;
            this.x -= this.target.measureText(this.data.content[this.where]).width;
        }
        Graphics.prototype.moveRight = function () {
            this.where++;
            this.x += this.target.measureText(this.data.content[this.where]).width;
        }
        Graphics.getExponentStyle = function (obj) {//need better method
            var y = obj.y;
            var size = obj.size;
            if (size > 40) {
                size = Math.floor(size * 0.45);
                y = Math.floor(y - size * 1.5);
            }
            else {
                size = 15;
                y -= 10;
            }
            return { x: -1, y: y, size: size, value: "" };
        }
        Graphics.getLogStyle = function (obj) {//need better method
            var y = obj.y;
            var size = obj.size;
            if (size > 40) {
                size = Math.floor(size * 0.45);
                y += 8;
            }
            else {
                size = 15;
                y += 3;
            }
            return { x: -1, y: y, size: size, value: "log" };
        }
        Graphics.getIndexStyle = function (obj) {
            var y = obj.y;
            var size = obj.size;
            if (size > 40) {
                size = Math.floor(size * 0.45);
                y = Math.floor(y - size * 1.5);
            }
            else {
                size = 15;
                y -= 10;
            }
            return { x: -1, y: y, size: size, value: "" };
        }
        Graphics.getRadicalSignStyle = function (obj) {
            var y = obj.y;
            var size = obj.size;
            return { x: -1, y: y, size: size, value: String.fromCharCode(8730) };
        }
        Graphics.getFrationStyle = function (obj) {
    
        }
     var graphics = new Graphics();
                graphics.initialization(board.getContext("2d"), -1, -1, -1);
  };
</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
 
graphics.add("1")
 pending…
2
 
b="asd"+"a"+"asd"
 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