需要显示1500多个对象，并且绘制时间太长

Question

我们使用fabric.js以图形格式显示结果。有时我们必须显示1500多个对象，并且显示时间太长。有什么方法可以加快这个过程吗？

以下是包含4个对象的工作示例.. http://jsfiddle.net/sumo1/b3q4uk5d/

var canvas = new fabric.Canvas('c');
fabric_rectangle(50, 50, 20,"A", "Y", "true");
fabric_circle(130, 50, 20,"B", "N", "true");
fabric_line(70, 50, 20,"true");
fabric_line(150, 50, 20,"true");
fabric_rectangle(210, 50, 20,"C", "Y", "true");
fabric_circle(290, 50, 20,"D", "N", "true");
fabric_line(230, 50, 20,"true");

function fabric_rectangle(a,b,r,t,c,visible) {
    xX = a;
    yY = b;

    var rectangle = (new fabric.Rect({
        originX: 'center',
        originY: 'center',
        width: (2*r),
        height: (2*r),
        fill: '#C0B7EE',
        stroke: '#000000',
        strokeWidth: 1,
        perPixelTargetFind: true
    }));

    //to add the custom variable to the rectangle
    fabric.Rect.prototype.toObject = (function(toObject) {
      return function() {
          return fabric.util.object.extend(toObject.call(this), {
          complementary: this.complementary,
        });
      };
    })(fabric.Rect.prototype.toObject);

    rectangle.complementary = c;

    rectangle.async = true;
    var text = new fabric.Text(t, {
        fontSize: 20,
        fillStyle: '#333',
        originX: 'center',
        originY: 'center'
    });

    var name = new fabric.Group([ rectangle, text], {
        left: xX,
        top: yY,
        visible: visible,
    });

    canvas.add(name);
}

function fabric_circle(a,b,r,t,c,visible) {
    xX = a;
    yY = b;


    var circle = new fabric.Circle({
        originX: 'center',
        originY: 'center',
        radius: r,
        fill: '#C0B7EE',
        stroke: '#000000',
        strokeWidth: 1,
        perPixelTargetFind: true
    });

    //to add the custom variable
    fabric.Circle.prototype.toObject = (function(toObject) {
      return function() {
        return fabric.util.object.extend(toObject.call(this), {
          complementary: this.complementary,
        });
      };
    })(fabric.Circle.prototype.toObject);

    circle.complementary = c;
    circle.async = true;

    var text = new fabric.Text(t, {
        fontSize: 20,
        fillStyle: '#333',
        originX: 'center',
        originY: 'center'
    });

    var name = new fabric.Group([ circle, text], {
        left: xX,
        top: yY,
        visible: visible,
    });

    canvas.add(name);
}

function makeLine(coords,visible) {
    return new fabric.Line(coords, {
      stroke: '#000000',
      strokeWidth: 1,
      visible: visible,
    });
}

function fabric_line(a,b,r,visible) {
    x = a ;
    y = b ;

    var name = makeLine([x,y+r,(x+(2*r)),y+r],visible);

    canvas.add(name);
}

我们还传递了多个自定义变量以及矩形和圆形来操纵对象。我们还有自定义菜单和缩放功能。如果对象计数小于100，一切正常，但是当问题发生时我们必须加载1500多个对象。

我们真的被困在这里，真的很感谢你的帮助。