在 JointJS 上批量添加元素会导致性能问题

我们正在尝试使用JointJS构建一个可视化框架（我们不使用Rappid）。SVG 用于在浏览器上呈现图形数据。我们有一个场景，我们有一个包含大约 4500 个端口的模型。我们使用端口作为元素而不是属性。意思是说我们在模型中将嵌入式端口作为单元格。需要这样的设置是有一定原因的。

将此类模型添加到图形中时，渲染大约需要 8 到 9 秒。渲染模型后，移动和重新定位模型就可以了。但是，当我们尝试添加更多模型时，浏览器往往会崩溃。

这就是我们创建 Paper 对象的方式

 function createPaper(options) {
     var paper = new joint.dia.Paper({ 
        el: options.el,
        width: options.width,
        height: options.height,
        model: options.graph,
        gridSize: 1,
        label:options.name,
        async : { batchSize: 250} 
    });
    return paper;
 }

这就是我们创建模型的方式

function createModel(options) {
    var model = new joint.shapes.devs.Model({
        position:options.position,
        size:options.size,
        attrs:  options.attrs   
    });
    return model;
}

这就是我们将端口创建为自定义模型的方式

    joint.shapes.custom = {};
    joint.shapes.custom.Port = joint.shapes.basic.Generic.extend(_.extend({},    joint.shapes.basic.PortsModelInterface, {
    markup: '<g class="rotatable"><g class="scalable"><path class="port-body" d = "M 0 0 L 0 0 L 15 5 L 0 10 L 0 10 z"></path></g><text class="port-label"/></g>',
    defaults: joint.util.deepSupplement({
    type: 'devs.Port',
    size: { width: 10, height: 10 },
    position : {x : 0, y : 0},
    attrs: {
        '.': { magnet: false },
        '.body': {
            width: 150, height: 250,
            stroke: '#000000'
        },
        '.port-body': {
            r: 5,
            magnet: true,
            stroke: '#000000',
            fill : 'yellow'
        },
        text: {
            'pointer-events': 'none'
        },
      }
   }, joint.shapes.basic.Generic.prototype.defaults),

}));
 joint.shapes.custom.PortView = joint.dia.ElementView.extend(joint.shapes.basic.PortsViewInterface);


 function createPort(options){
    var port=new joint.shapes.custom.Port({
        position:options.position,
        size:options.size,
        attrs:  options.attrs
    });
    return port;    
}

以下是我们在图表中添加模型和端口的方式

                    var cells = [];
                    var model = createModel(options);
                    //Add the cell to the graph
                    cells.push(model);
                    var totalInports=options.inPorts.length;
                    var totalOutports=options.outPorts.length;

                    //Add the inports 
                    for (var portIndex = 0; portIndex < totalInports; portIndex++) {
                        port = createPort(options.inPorts[portIndex]);
                        model.embed(port);
                        cells.push(port);
                    } 
                    //Add the outports
                    for (var portIndex = 0; portIndex < totalOutports; portIndex++) {
                        port = createPort(options.outPorts[portIndex]);
                        model.embed(port);
                        cells.push(port);
                    }
                    graph.addCells(cells);

任何人都可以对以下问题给出一些答案 -

我们是否以正确的方式使用纸张和模型？

是否有更好的方法将单元格添加到图表中，可以改善 性能？

提前致谢