javascript - jQuery 顺序元素、删除、分离、克隆、追加内存泄漏

Question

我有一个父级 div，里面有大约 300 个 div，其中包含一个图像和一些文本。我有一个数组，其中包含使用引用对 div 重新排序所需的所有信息..

if 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 个列表元素的有序列表，因此您不会注意到内存增加!

Answer 1

在遇到性能问题的繁重 (DOM) 操作中，您应该完全放弃 jQuery，并返回到 vanilla 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