jQuery 插件中的 JavaScript 内存泄漏

Question

我有一个具有以下结构的插件：

(function($) {
    $.fn.drawFieldsTable = function(options) {
        var settings = {
                url        : 'ajax/pathToFile.php'
        };

        if (options) {
            settings = $.extend(settings, options);
        }

        return this.each(function() {
            $this = $(this);
            $.ajax({
                url  : settings.url,
                type : 'GET',
                data: // some request data here
                success: function(result) {
                    drawFieldElements(result, $this);
                }
            });

            function drawFieldElements(fields, container)
            {
                var replacement = container.clone()
                                           .empty();
                $.each(fields, function(i) {
                    var field;
                    field = buildFieldItem(i, this);
                    replacement.append(field);
                });

                container.replaceWith(replacement);
            }

            function buildFieldItem(i, fieldDataObj)
            {
                var $field = $('<div></div>')
                        .addClass('field')
                        .attr('data-fieldname', i)
                        .attr('data-ord', fieldDataObj.ord);
                return $field;
            }
        });

    };

})(jQuery);

每次 buildFieldItem 调用时我都会遇到严重的内存泄漏。如果我不调用此函数或将其设为空函数或只是不在其范围内使用其参数 - 则不会发生泄漏。泄漏仅发生在 Internet Explorer (8) 中。在其他浏览器中一切正常。请求帮助。提前致谢。

更新

我更新了我的问题，以便更好地演示 buildFieldItem 的实际用途。 一旦 fieldDataObj 可能包含大约 100 个项目，拥有这 4 行只会导致 IE 中的喷泉，而不是泄漏。

更新2

我已经用创建一个新的div替换了clone()和empty()，并且我还缩小了buildFieldItem看起来像：

function buildFieldItem(i, fieldDataObj)
{
    var $field = $('<div></div>')
            .addClass('field');
    return $field;
}

仍然泄漏。唯一不泄露的模式是：

function buildFieldItem(i, fieldDataObj)
{
    var $field;
    return $field;
}

看起来完全是胡说八道。函数中的代码越少，整体泄漏就越小。 IE 是否无法删除对整个函数或类似内容的引用？

Answer 1

现在您已经为我们提供了更多的 buildFieldItem() 函数体，我发现另一个可能的泄漏。

如果没有处于可运行状态的完整代码，我不能肯定地说，但是当您设置 $field.attr('data-ord', fieldDataObj.ord) 时，如果 .ord< /code> 是任何类型的 DOM 引用，您可能会将某种 DOM 引用存储为 $field 对象上的属性。当您稍后在父级上执行 .empty() 时，旧版本的 IE 中可能不会清除该引用，因此它会卡住并且无法进行垃圾收集。

这就是 jQuery 发明 .data() 方法的原因之一，因为它不在 DOM 对象上存储数据，而是使用 .empty() 自行清理> 即使在旧版本的 IE 上也可以使用该方法。由于我没有代码的工作版本，因此我不能确定这就是问题所在，但我建议将：更改

.attr('data-ord', fieldDataObj.ord);

为

.data('ord',  fieldDataObj.ord);

And，然后更改读取该属性的任何其他引用以使用 。 data() 来读取它。

我还认为您在这条线上遇到麻烦，因为您依赖 .clone() 和 .empty() 来完美清理所有内容（即使是 jQuery 没有创建的东西）并且永远不会在任何浏览器中泄漏任何内容：

var replacement = container.clone().empty();

最好创建一个全新的容器，因为您希望它以任何方式开始都是空的，因为这永远不会泄漏先前的数据，因为它没有任何数据：

var replacement = $("<div>");

---

回应您第三次披露的实际内容drawFieldElements()：

现在，你的代码对我来说确实没有意义。你有这个：

        function drawFieldElements(fields, container)
        {
            var replacement = container.clone()
                                       .empty();
            $.each(fields, function(i) {
                var field;
                field = buildFieldItem(i, this);
                replacement.append(field);
            });

            container.replaceWith(replacement);
        }

你拿走你的容器。您克隆并清空它。所以，现在克隆中只剩下一个带有类的顶层。您将一堆内容附加到克隆中。然后，将原始容器替换为新的克隆容器。您只是在通过所有这些多余的 DOM 操作来解决内存泄漏问题。

为什么不直接清除原始容器并附加到它呢？然后就没有克隆，没有replaceWith。

        function drawFieldElements(fields, container)
        {
            container.empty();
            $.each(fields, function(i) {
                container.append(buildFieldItem(i, this));
            });
        }

我不知道这是否有助于解决内存泄漏问题，但清理代码以删除所有不必要的 DOM 操作始终是朝着好的方向迈出的一步。

Answer 2

所以，我终于找到了一些时间来回到这个老问题并最终确定。我很快就解决了这个问题，但我只是很忙。

以下几行导致 IE 中的内存泄漏：

var $isObligatory = $('<input>')
    .attr('type', 'checkbox')
    .attr('name', 'is-obligatory')
    .prop('checked', isObligatory)
    .change(function() {
        settings.gFields.applied[settings.subsection][i].obligate =
            ($(this).prop('checked')) ? 1 : 0;
    });

如您所见，它在为更改事件添加处理程序时创建某种循环引用。参考IE不够智能，无法破解。

事实是，注释掉这是我的第一次尝试，但是一旦我在同一个文件中实现了可拖动功能，泄漏仍然存在，因为可拖动也是导致它的原因！这就是我为此苦苦挣扎的原因。将可拖动元素移到插件代码之外解决了这个问题。

感谢大家发表评论和回答。我很抱歉没有发布完整的代码，我认为我足够聪明，只发布有问题的行。也很抱歉回答晚了。