jsPlumb提高执行速度

Question

我正在使用jsPlumb库来绘制(连接)一些div。divs的数量是动态的，最多可达2000个div。我使用下面的递归方法来划清界限：

connectGraphNodes: function(jsp_o, children, level){
    var nr_of_children, i=0;

    nr_of_children = children.length;
    for(i=0; i<nr_of_children; i++){
        if(!this.isPropertyEmpty(children[i]['id']) && !this.isPropertyEmpty(children[i]['name'])){
            // Connect child node with node
            jsp_o.connect({ 
                source: 'es-org-graph-box-' + children[i]['parent'], 
                target: 'es-org-graph-box-' + children[i]['id'],
               overlays:[
                    [ "Label", {
                            label: children[i]['percentage']+'%', id:"label",
                            location: 1                                
                        }
                    ]
                ]   
            });

            if(this.isSet(children[i]['children']) && children[i]['children'].length > 0){
                level++;
                // Run recurence function for child-nodes
                jsp_o.setSuspendDrawing(true);
                this.connectGraphNodes(jsp_o, children[i]['children'], level);
                jsp_o.setSuspendDrawing(false, true);
            }
        }            
    }
}

我的问题是，对于一个大于100的数字，加载时间非常长，有些时候google chrome会弹出一个关闭标签选项。我可以对我的方法做些什么改进吗?或者jsPlumb有那么慢？

Answer 1

就像Rich已经提到的，你必须利用

jsPlumb.setSuspendDrawing(); 

方法

试试这个：

connectGraphNodes: function(jsp_o, children, level){
    var nr_of_children, i=0;

    nr_of_children = children.length;
    //start of suspend drawing
    jsPlumb.setSuspendDrawing(true);
    for(i=0; i<nr_of_children; i++){
        if(!this.isPropertyEmpty(children[i]['id']) && !this.isPropertyEmpty(children[i]['name'])){
            // Connect child node with node
            jsp_o.connect({ 
                source: 'es-org-graph-box-' + children[i]['parent'], 
                target: 'es-org-graph-box-' + children[i]['id'],
               overlays:[
                    [ "Label", {
                            label: children[i]['percentage']+'%', id:"label",
                            location: 1                                
                        }
                    ]
                ]   
            });

            if(this.isSet(children[i]['children']) && children[i]['children'].length > 0){
                level++;
                // Run recurence function for child-nodes
                jsp_o.setSuspendDrawing(true);
                this.connectGraphNodes(jsp_o, children[i]['children'], level);
                jsp_o.setSuspendDrawing(false, true);
            }
        }            
    }
    //end of suspend drawing
    jsPlumb.setSuspendDrawing(false,true);
}