javascript - 清理内存泄漏

Question

我正在使用 jQuery 克隆元素，然后在该克隆中保存对元素的引用。很久以后删除克隆。这是一个基本示例:

HTML

<div> <span></span> </div>

脚本

var i, $clone, $span,
    $saved = $('span'),
    $orig = $('div');

for (i = 0; i < 100; i++) {
    $clone = $orig.clone().appendTo('body');
    $span = $clone.find('span');

    $saved = $saved.add($span);
    $clone.remove();
}
console.log( 'leaking = ', $saved.length);

控制台日志输出长度为101。

我需要清理 $saved jQuery 对象并删除对不再附加到 DOM 的元素的引用。所以我写了这个基本函数来清理它。

var cleanUpLeaks = function ($el) {
    var el, remove,
    index = $el.length - 1;
    while (index >= 0) {
        el = $el[index];
        remove = true;
        while (el) {
            el = el.parentNode;
            if (el && el.nodeName === 'HTML') {
                remove = false;
                break;
            }
        }
        if (remove) {
            $el.splice(index, 1);
        }
        index--;
    }
    return $el;
};

console.log( 'cleaned up = ', cleanUpLeaks( $saved ).length );

这次控制台输出1。

所以现在我的问题是:

• 我怎样才能首先防止内存泄漏？
• 如果这不可能，我是否应该在 cleanUpLeaks 函数中使用 .splice() 来删除引用？或者按照建议将该引用设置为 null 会更好吗？因为当我将其设置为 null 时，$saved 的长度仍为 101。

演示:http://jsfiddle.net/Mottie/6q2hjazg/

---

为了详细说明，我在 $saved 中保存了对跨度的引用。还有其他函数将此值用于样式等。这是一个非常基本的例子；不，我不会在将克隆附加到正文后立即删除克隆，这样做是为了展示内存泄漏是如何发生的。

Answer 1

这里更好的解决方案是停止将动态 DOM 元素保存在持久的 jQuery 变量中。如果您的页面定期从 DOM 中删除内容，那么将这些内容保存在持久性 jQuery 对象中只会让您不得不处理内存泄漏，而不是将设计更改为不必保存对 DOM 元素的引用的设计全部。

相反，如果您只是用文档中其他地方未使用的特定类名标记有趣的元素，您可以随时使用简单的 jQuery 选择器查询生成所需的元素列表，您将完全没有问题存在泄漏，因为您永远不会在持久变量中保留 DOM 引用。