jQuery order elements, remove, detach, clone, memory leaks 추가

Question

나는 이미지와 일부 텍스트를 모두 포함하는 약 300 div의 부모 div가 있습니다. 내가 참조를 사용하여 divs를 재정렬 할 필요가있는 모든 정보를 포함하는 배열을 가지고 ..

만약 내가 그것을 주문한 후 배열 요소를 옮긴 다음 루프를 통해 요소를 이동 시키면 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; 
}); 

내가 분리가 DOM에서 요소를 이렇게 계속 읽었

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

또 다른 시도 다시 페이지에 넣을 때 아무것도 재현하지 못하고 메모리를 늘리지는 않지만 그렇게합니다. NT는 작동하는 것 같다!

뭔가 빠졌습니까? 그만큼 메모리를 늘리지 않고 정렬 할 수있는 방법이 있어야합니까?

모든 예제에서는 약 10 개의 목록 요소가있는 정렬 된 목록을 사용하고 있기 때문에 메모리 증가를 알 수 없습니다! 이 예와 같이

Answer 1

성능 문제가있는 무거운 (DOM) 작업에서는 jQuery를 완전히 삭제하고 바닐라 자바 ​​스크립트로 되돌려 야합니다 (특히 최신 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> 

자바 스크립트 : 이것은 당신의 아이를 분리

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을 수정하지 못하도록하는 부모.