Javascript 为3000个div创建状态机图表时JSP内存泄漏

我正在尝试使用jsPlumb生成流程图

instance.connect函数适用于较少的div（jsPlumb窗口），但当连接3000个div时，jsPlumb会使用大量内存和页面崩溃

是内存泄漏还是我做错了什么

下面是我目前使用的代码：

<div class="demo statemachine-demo" id="statemachine-demo">
<div class="w jsplumb-draggable jsplumb-droppable" id="flowchartWindow1" style="top:10px">CBL  RMODE(ANY) OPT(STD) LIST LIB<div class="ep"></div></div>
.... so on
<div class="w jsplumb-draggable jsplumb-droppable" id="flowchartWindow3000" style="top:10px">CBL  RMODE(ANY) OPT(STD) LIST LIB<div class="ep"></div></div>
</div>

var instance;
jsPlumb.ready(function() {
    instance = jsPlumb.getInstance({
        Endpoint : ["Dot", {radius:2}],
        HoverPaintStyle : {strokeStyle:"#1e8151", lineWidth:2 },
        ConnectionOverlays : [
            [ "Arrow", {location:1,id:"arrow",length:14,foldback:0.8}],/*[ "Label", { label:"FOO", id:"label", cssClass:"aLabel" }]*/],
        Container:"statemachine-demo"
    });
    var windows = jsPlumb.getSelector(".statemachine-demo .w");
    instance.draggable(windows);
    instance.bind("click", function(c) {
            instance.detach(c);
    });
    instance.bind("connection", function(info) {
        //info.connection.getOverlay("label").setLabel(info.connection.id);
    });
    instance.doWhileSuspended(function() {
        var isFilterSupported = instance.isDragFilterSupported();
        if (isFilterSupported) {
            instance.makeSource(windows, {
                filter:".ep",
                anchor:"Continuous",
                connector:[ "Straight" ],
                connectorStyle:{ strokeStyle:"#5c96bc", lineWidth:2, outlineColor:"transparent", outlineWidth:4 },
            });
        }
        else {
            var eps = jsPlumb.getSelector(".ep");
            for (var i = 0; i < eps.length; i++) {
                var e = eps[i], p = e.parentNode;
                instance.makeSource(e, {
                    parent:p,
                    anchor:"Continuous",
                    connector:[ "Straight" ],
                    connectorStyle:{ strokeStyle:"#5c96bc",lineWidth:2, outlineColor:"transparent", outlineWidth:4 },
                });
            }
        }
    });
    // initialise all '.w' elements as connection targets.
    instance.makeTarget(windows, {
        dropOptions:{ hoverClass:"dragHover" },
        anchor:"Continuous",
        allowLoopback:true,
        anchor:"Continuous"
    });
    var len = $('.w').length;
    for( var index=1; index < len; index++){
        instance.connect({ source:("flowchartWindow"+index), target:("flowchartWindow"+(index+1))});
    }
    len = null;
}); 

CBL RMODE（任何）选项（标准）列表库
.... 等等
CBL RMODE（任何）选项（标准）列表库
var实例；
jsPlumb.ready（函数（）{
instance=jsPlumb.getInstance({
端点：[“点”{半径：2}]，
悬停画风：{strokeStyle:#1e8151'，线宽：2}，
连接概述：[
[“Arrow”，{location:1，id:Arrow，length:14，foldback:0.8}]，/*[“Label”，{Label:FOO，id:Label，cssClass:aLabel}]*/]，
容器：“状态机演示”
});
var windows=jsPlumb.getSelector（“.statemachine demo.w”）；
实例。可拖动（windows）；
绑定（“单击”，函数（c）{
实例.分离（c）；
});
绑定（“连接”，函数（信息）{
//info.connection.getOverlay（“标签”）.setLabel（info.connection.id）；
});
instance.doWhileSuspended（函数（）{
var isFilterSupported=instance.isDragFilterSupported（）；
如果（iFilterSupported）{
实例。makeSource（windows{
过滤器：“.ep”，
主播：“连续”，
连接器：[“直”]，
连接器样式：{strokeStyle:#5c96bc”，线宽：2，大纲颜色：“透明”，大纲宽度：4}，
});
}
否则{
var-eps=jsPlumb.getSelector（“.ep”）；
对于（变量i=0；i

有些地方使用的是

jsplump

，有些地方使用的是生成的

实例。试着只使用jsPlumb，看看问题是否可以重现。这没有任何区别。我使用的是github的statemachine演示脚本，唯一的区别是连接所有窗口的div和loop的数量。Google Chrome WebDev工具说布局强制：jsPlumbUtil.extend.getSize在timeline选项卡下有大量侦听器。内存快照显示数组是导致问题的原因。我不知道数组是否是某种参考数据。文档中没有提到如果我可以将这些数据移动到Java/PHP，并使用ajax查找值。