jQuery順序元素，刪除，分離，克隆，追加內存泄漏

Question

我有一個父div與大約300 div的所有其中包含一個圖像和一些文本。我有一個數組，其中包含我需要重新排列div的所有信息，使用參考..

如果如果然後循環通過數組後，我已經命令它，然後移動元素accordinly我得到嚴重的內存泄漏高達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如此當你把它放回頁面時，它不會重新創建任何內容，也不會增加內存，但它確實如此nt似乎工作？！

有什麼我不知道？必須有一種方法來排序它們而不增加記憶力呢？

我發現的所有例子都使用了有序列表和大約10個列表元素，所以你不會注意到內存的增加！

Answer 1

在遇到性能問題的繁重（DOM）操作中，應該完全刪除jQuery，並返回到vanilla JavaScript（尤其是如果no-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 -loop。
• document.getElementById（標識符）
• split（隔板，極限）
• document.createDocumentFragment

Answer 2

嘗試這樣例子：

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。