동적 요소 추가 시 Jquery 속도 보완 방법

DocumentFragment 사용

제이쿼리가 왜 이렇게 느릴까요라는 질문에 꼭 나오는 겁니다. 수십, 수백 개의 태그를 동적으로 추가하는 데 documentFragement를 사용하지 않고 그냥 append 했기 때문에 나타나는 현상입니다.

var $zero = $('#zero');
['Aero', 'Bero', 'Cero', 'Dero', ... , 'Zero'].forEach(function(item) {
  $zero.append('<strong>' + item + '</strong>');
});

위와 같이 간단하게 할 수도 있지만 기존에 있는 태그에 append하는 것은 성능에 매우 부담이 갑니다. 또 26번 반복하기 때문에 브라우저는 26번이나 페이지를 새로 그려야 합니다. 만약 반복문의 개수가 수백 수천개라고 생각해보세요. 브라우저가 파업할 겁니다. 이 때 documentFragement가 여러분을 살려줍니다.

var $frag = $(document.createDocumentFragment());
['Aero', 'Bero', 'Cero', 'Dero', ... , 'Zero'].forEach(function(item) {
  $frag.append('<strong>' + item + '</strong>');
});
$('#zero').append($frag);

$frag에 append하는 것은 가상의 메모리 공간에서 일어나는 일이기 때문에 브라우저와는 상관이 없습니다. 마지막에 그 $frag를 원래 태그에 한 번에 append해주는 겁니다. 이렇게 하면 단 한번만 브라우저에 태그가 추가되어 브라우저가 페이지를 새로 그리는 횟수도 한 번뿐입니다.

다른 방법도 있습니다. detach 메소드를 사용하는 겁니다.

var $zero = $('#zero').detach();
['Aero', 'Bero', 'Cero', 'Dero', ... , 'Zero'].forEach(function(item) {
  $zero.append('<strong>' + item + '</strong>');
});
$zero.appendTo($zeroParent);

detach 메소드를 사용하는 순간 원래 있던 #zero 태그는 브라우저에서 떨어져서 메모리 속으로 들어갑니다. 메모리 상에서 append를 해준 후 마지막에 다시 원래 태그의 부모의 자식으로 추가하는 겁니다.