确定导致内存泄漏或不良做法的区域

Question

在下面的函数中，您能指出可能发生的潜在内存泄漏的位置以及我应该/可以优化的位置吗？

我有一个创建许多可编辑div的Web应用程序。当＆gt;它已经发展到崩溃浏览器的程度。创建了50个这样的div。

如果我能找出下面代码片段中的代码导致内存泄漏，我可以在整个应用程序中识别这一点并纠正/修复它们。

从这个source他们说包含长字符串的变量可能是内存泄漏的一个主要原因（我的JavaScript文件中有相当数量的这些）。将这些变量在使用后设置为null确实会对减少内存使用量产生很大影响（源声称它会略微减少内存使用量）。

选择器贵吗？例如;如果我要在函数中多次访问$('.abc', row)，那么将其存储在本地变量var abc = $('.abc', row);中并从现在开始访问它是一个不可忽略的好处一个功能？

function setupWidget(seedWidget, layerId, useUploadMediaBtn, isBtn) {

    // Setup Widget editting functionality: drag, resize, hover, click
    seedWidget.draggable({
        cursor: "move",
        cancel: false,
        grid: [5, 5],
        start: function (event, ui) {
            IS_EDITTING = true;
        },
        stop: function (event, ui) {

            IS_EDITTING = false;
            positionResizeResponsive($(this));
        }
    })
    .resizable({
        handles: 'ne, se, sw, nw',
        stop: function (event, ui) {

            IS_EDITTING = false;
            updateDataAttr(seedWidget, "locked", false);
            positionResizeResponsive($(this));
        },
        start: function (event, ui) {

            IS_EDITTING = true;
            seedWidget.find('.widget-caption').slideUp(150);
            updateDataAttr(seedWidget, "locked", true);
        }
    })
    .hover(
     function () {

         $(this).removeClass("mf-editor-widget-hover");
         $(this).children('.ui-resizable-handle').removeClass("mf-editor-widget-hide").delay(50);

         if (seedWidget.data('locked') || IS_EDITTING)
             return;

         $(this).find('.widget-caption').slideDown(150);
     },
     function () {

         $(this).addClass("mf-editor-widget-hover");
         $(this).children('.ui-resizable-handle').addClass("mf-editor-widget-hide").delay(50);

         if (seedWidget.data('locked') || IS_EDITTING)
             return;

         $(this).find('.widget-caption').slideUp(150);
     }
    )
    .click(function () {

        IS_EDITTING = false;
        selectLayer(undefined, layerId);
    });
    $(seedWidget).children('.ui-resizable-handle').toggleClass("mf-editor-widget-hide").delay(50);

    // Append popup overlay div
    $(seedWidget).append('<div class="widget-caption">\
        <div class="row">\
            <div class="col-xs-4 text-center">\
                <a href="" class="btn btn-inverse text-center widget-edit-btn" rel="tooltip" title="Edit Content" ><i class="fa fa-edit"></i></a>\
            </div>\
            <div class="col-xs-4 text-center">\
                <a href="" class="thickbox btn btn-inverse text-center widget-transitions-btn" rel="tooltip" title="Edit Style"><i class="fa fa-adjust"></i></a> \
            </div>\
            <div class="col-xs-4 text-center">\
                <a href="" class="btn btn-inverse text-center widget-trash-btn" rel="tooltip" title="Trash" ><i class="fa fa-trash"></i></a>\
            </div>\
        </div>\
    </div>'.replace(/\t/g, ''));
    $("[rel='tooltip']").tooltip();

    $('.widget-caption .widget-transitions-btn', seedWidget).click(function (evt) {
        evt.preventDefault();
        layerRowClick(null, layerId);
        return false;
    });

    // Make widget content editable
    var editor = addEditorToElement($('.mf-container', seedWidget), isBtn);
    $('.widget-caption .widget-edit-btn', seedWidget).click(function (evt) {
        evt.preventDefault();
        editor.selectElement($('.mf-container', seedWidget).get(0));
        return false;
    });

    $('.MediumEditorColorPicker').spectrum({
        color: "#f00",
        showAlpha: true,
        //allowEmpty:true,
        preferredFormat: "rgb",
        showInput: true,
    });

    editor.subscribe('showToolbar', function () {

        IS_EDITTING = seedWidget;
        seedWidget.draggable({ disabled: true });
        seedWidget.resizable({ disabled: true });
        seedWidget.find('.widget-caption').slideUp(150);
        updateDataAttr(seedWidget, "locked", true);
    });

    $('.widget-caption .widget-trash-btn', seedWidget).click(function (evt) {
        evt.preventDefault();
        trashLayer(null, layerId);
        return false;
    });

    var transitions = seedWidget.attr('data-transitions');
    transitions = (transitions == undefined || transitions.length <= 0) ? "{}" : transitions.replace(/&quot;/g, '\\"');
    updateDataAttr(seedWidget, 'transitions', transitions);
    return seedWidget;
}

function updateDataAttr(ele, key, value, append) {
    // Post: Updates the JavaScript cache and also the actual HTML object

    var existing = ($(ele).data(key) == undefined) ? '' : $(ele).data(key) + ' ';
    var newValue = (append) ? existing + value : value;
    $(ele).data(key, newValue);
    $(ele).attr('data-' + key, newValue);
}