jQuery排序元素，移除、分离、克隆、附加内存泄漏

jQuery order elements, remove, detach, clone, append memory leaks

本文关键字：内存 泄漏 克隆 分离 元素 移除 jQuery 排序      更新时间：2023-09-26

我有一个父div，里面有大约300个div，全部包含一个图像和一些文本。我有一个数组，它包含了使用引用重新排序div所需的所有信息。。

如果if在我排序后循环遍历数组，然后相应地移动元素，我会得到高达100MB的严重内存泄漏，我会对它们进行排序！

我尝试了几种方法，但仍然没有成功

$.each(gameArray , function($idx, $itm) { 
    $("#elementid"+ $itm.split('|#|')[0] ).appendTo($("#parent"));
});

另一次尝试

$.each(gameArray , function($idx, $itm) { 
    var element = $("#elementid"+ $itm.split('|#|')[0] ).detach();
    element.appendTo($("#parent"));
    element = null;
});

另一次尝试

$.each(gameArray , function($idx, $itm) { 
    var element = $("#elementid"+ $itm.split('|#|')[0] ).clone(true).remove();
    element.appendTo($("#parent"));
    element = null;
});

我读到分离将元素保留在DOM中，所以当你将其放回页面时，它不会重新创建任何内容，也不会增加内存，但它似乎不起作用？！

我缺什么了吗？一定有一种方法可以在不增加那么多内存的情况下对它们进行排序？

我发现的所有例子都使用了大约有10个列表元素的有序列表，所以你不会注意到内存的增加！

在遇到性能问题的繁重（DOM）操作中，您应该完全放弃jQuery，转而使用普通的JavaScript（尤其是如果无jQuery替代方案适用于所有现代浏览器）。

var fragment = document.createDocumentFragment(); // Temporary storage
for (var $idx=0, len = gameArray.length; $idx<len; $idx++) {
    var $itm = $gameArray[$idx];
    fragment.appendChild(
        document.getElementById("elementid" + $itm.split('|#|', 1)[0] )
    );
}
// Append all items to parent
document.getElementById('parent').appendChild(fragment);

使用的方法有：

  • for-循环
  • document.getElementById（标识符）
  • split（分隔符，限制）
  • document.createDocumentFragment

尝试以下示例：

HTML:

<div id="parent">
    <div id="0">0</div>
    <div id="1">1</div>
    <div id="2">2</div>
    <div id="3">3</div>
    <div id="4">4</div>
    <div id="5">5</div>
    <div id="6">6</div>
    <div id="7">7</div>
    <div id="8">8</div>
    <div id="9">9</div>
</div>

Javascript：

var games = [ 4, 3, 0, 2, 5, 1, 6, 9, 7, 8 ]; // desired sort order
var $parent = $('#parent');
var $children = $parent.children('div');
$children.detach().sort(function(a,b){
    var aId = parseInt( $(a).attr('id'), 10 );
    var bId = parseInt( $(b).attr('id'), 10 )
    return games.indexOf(aId) > games.indexOf(bId);
});
$parent.append($children);

这将分离您的子级，对它们进行排序，然后将它们追加回父级，从而避免在排序过程中修改DOM。

相关文章：