Question

最近，我使用Google Closure研究HTML Canvas。

但Google Closure的表现非常缓慢。

当我运行我的代码时...它几乎崩溃了Chrome浏览器。

当然我在不使用Google Closure的HTML Canvas代码中做了同样的事情;它非常快。

这是我使用Google Closure的画布代码（goog.graphics.CanvasGraphics）

由于我只是这个模块的初学者（goog.graphics.CanvasGraphics），我不确定我做得对。我做错了吗？为什么这么慢？!!

太令人沮丧了。

/** 
 * @param {Document} doct
 */
test.main = function(doct){
var dom = new goog.dom.DomHelper(doct);

/**
 * goog.graphics.CanvasGraphics(width, height, opt_coordWidth, opt_coordHeight, opt_domHelper)
 * @type {goog.graphics.CanvasGraphics} 
 */
var canvas = new goog.graphics.CanvasGraphics(500, 500, null, null, dom);
canvas.render(dom.getElement('canvasTest2'))
canvas.balls = [];






 function  drawScreen () {
    canvas.clear()

    for (var i =0; i <canvas.balls.length; i++) {
        ball = canvas.balls[i];
        ball.x += ball.xunits;
        ball.y += ball.yunits;
        var ellipse = canvas.drawEllipse(ball.x, ball.y, ball.radius, ball.radius, null, ball.solidFill);


        if (ball.x > canvas.width || ball.x < 0 ) {
            ball.angle = 180 - ball.angle;
            updateBall(ball);
        } else if (ball.y > canvas.height || ball.y < 0) {
            ball.angle = 360 - ball.angle;
            updateBall(ball); 
        }
    }

}

function updateBall(ball) {

    ball.radians = ball.angle * Math.PI/ 180;
    ball.xunits = Math.cos(ball.radians) * ball.speed;
    ball.yunits = Math.sin(ball.radians) * ball.speed;

}

var numBalls = 80;
var maxSize = 15;
var minSize = 5;
var maxSpeed = maxSize+5;

for (var i = 0; i < numBalls; i++) {

    var tempRadius = Math.floor(Math.random()*maxSize)+minSize;
    var tempX = tempRadius*2 + (Math.floor(Math.random()*canvas.width)-tempRadius*2);
    var tempY = tempRadius*2 + (Math.floor(Math.random()*canvas.height)-tempRadius*2);
    var tempSpeed = maxSpeed-tempRadius;
    var tempAngle =  Math.floor(Math.random()*360);
    var tempRadians = tempAngle * Math.PI/ 180;
    var tempXunits = Math.cos(tempRadians) * tempSpeed;
    var tempYunits = Math.sin(tempRadians) * tempSpeed;

    var stroke = new goog.graphics.Stroke(3, '#333');
    var solidFill = new goog.graphics.SolidFill('#333');

    tempBall = {x:tempX,y:tempY,radius:tempRadius, speed:tempSpeed, stroke:stroke, solidFill:solidFill, angle:tempAngle, xunits:tempXunits, yunits:tempYunits}

    canvas.balls.push(tempBall);

}

setInterval(drawScreen, 32);    


}

Answer 1

每次使用闭包库渲染帧时都不应该调用“drawEllipse”，因为这会创建一个元素并将其作为子项添加到画布中。相反，您应该创建一次省略号，然后使用“forEachChild”函数循环它们。上面代码的性能非常糟糕，因为它为每个循环创建了越来越多的子画面。

以下是“drawEllipse”的代码供参考：

/**
 * Draw an ellipse.
 *
 * @param {number} cx Center X coordinate.
 * @param {number} cy Center Y coordinate.
 * @param {number} rx Radius length for the x-axis.
 * @param {number} ry Radius length for the y-axis.
 * @param {goog.graphics.Stroke} stroke Stroke object describing the
 *    stroke.
 * @param {goog.graphics.Fill} fill Fill object describing the fill.
 * @param {goog.graphics.GroupElement=} opt_group The group wrapper
 *     element to append to.  If not specified, appends to the main canvas.
 *
 * @return {goog.graphics.EllipseElement} The newly created element.
 * @override
 */
goog.graphics.CanvasGraphics.prototype.drawEllipse = function(cx, cy, rx, ry,
    stroke, fill, opt_group) {
  var element = new goog.graphics.CanvasEllipseElement(null, this,
      cx, cy, rx, ry, stroke, fill);
  this.append(element, opt_group);
  return element;
};

Answer 2

也许非常明显，但你是否尝试使用高级编译？这将删除死代码并优化代码。请参阅https://developers.google.com/closure/compiler/docs/api-tutorial3它可能会使性能可以接受......

此致

雷

Google Closure Graphic模块太慢了。 goog.graphics.Canvas Graphics

2 个答案: