kineticjs - kineticjs のパフォーマンスの問題

Question

キャンバス上のシェイプの数が増えると、kineticjs で重大なパフォーマンスの問題が発生します。私は 2 つの関数を持っています。1 つはパス、テキストを初期化し、それらをステージにレンダリングします。2 番目の関数は 5 秒ごとに呼び出され、以前に描画されたパスとテキストの変更を更新します。ここに私がしようとしているもののサンプルスニペットがあります、

  /**
  * Function that inits the shapes
  */
  init = function(params) {
  //Create the path object
  var path = new Kinetic.Path({
    data : params.geom,
    fill : params.fill,
    stroke : params.stroke.fill,
    strokeEnabled : false,
    scale : 1
  });
  path.setId(params.id + '.path');
  var simpleText = new Kinetic.Text({
    x : params.x,
    y : params.y + (params.height /2),
    text : params.displayText,
    fontSize : 12,
    fontFamily : params.family,
    fontStyle : params.style,
    fill : params.fill
  });
  simpleText.setId(params.id + '.text');

  var layer = new Kinetic.Layer();
  layer.setId(params.id);
  layer.add(path);
  layer.add(simpleText);
  stage.add(layer);
}

/**
* Update every 5 seconds based on new data
*/
update = function(params) {
  var layer = null;
  if (Kinetic.Global.ids[params.id] != undefined) {
    layer = Kinetic.Global.ids[params.id];
    //Set text
    var textItem = Kinetic.Global.ids[params.id + '.text'];
    textItem.setText(params.displayText);
    //center the text
    textItem.setAttr('x', params.x + (params.width / 2) - (textItem.textWidth / 2));
    textItem.setAttr('y', params.y + (params.height / 2) -            textItem.getAttr('fontSize'));
    // set center style
    textItem.setAlign('center');
    //Set path color
    var pathItem = Kinetic.Global.ids[params.id + '.path'];
    pathItem.setFill(params.fill);
    pathItem.setOpacity(params.alpha);

    layer.clear();
    layer.draw();
  }
}

描画する図形の数が増えると、このコードは遅くなり、大量のメモリを消費します。上記のコードにはおそらく改善すべき多くの領域があり、それらのポインタを探しています。具体的には、Id のルックアップと更新が既存の形状を更新する最良の方法であるかどうかはわかりません。