Javascript 需要显示1500+；对象及其绘制时间过长

我们使用fabric.js以图形格式显示结果。有时我们必须显示1500多个对象，而且显示时间太长。我们有没有办法加快这个过程

下面是4个对象的工作示例

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

---

我们真的被困在这里，非常感谢您的帮助。

谢谢@epascarello，这个链接确实帮助我提高了性能。。

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);
}