Элементы заказа jQuery, удалить, отсоединить, клонировать, добавить утечки памяти

Question

У меня есть родительский div с около 300 div, внутри которого есть изображение и текст. у меня есть массив, который содержит всю информацию, необходимую для переупорядочения div, используя ссылки ..

Если если после этого я зациклил массив после того, как я его заказал, а затем переместил элементы соответственно, я получаю серьезные утечки памяти до 100 МБ дополнительного времени, я сортирую их!

Я пробовал несколько способов, но все еще безуспешно

$.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;
}); 

Я читал, что detach хранит элемент в DOM, поэтому, когда вы помещаете его обратно на страницу, он ничего не воссоздает и не увеличивает память, но, похоже, он не работает?!

что-то мне не хватает? должен быть способ сортировки их без увеличения памяти на столько?

Все примеры, которые я обнаружил, использовали упорядоченные списки с примерно 10 элементами списка, поэтому вы не замечаете увеличения памяти!

Answer 1

При тяжелых (DOM) операциях, где возникают проблемы с производительностью, вы должны полностью отбросить jQuery и вернуться к обычному 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 в процессе сортировки.