DocumentFragment

var $box = $('#box');
var arr = ['a','b','c','d','e','f'];

arr.forEach( item => {
  $box.append( '<p>' + item + '</p>' );
});

 

위와 같은 방식으로 배열 등을 받아와서 동적으로 태그를 추가해주는 방식은 양이 적으면 상관없겠지만 
그 양이 수백, 수천개라면 성능에도 좋지 않고 그만큼 페이지를 새로 그려야합니다. 브라우저가 힘들어할겁니다.

 

var $box = $('#box');
var arr = ['a','b','c','d','e','f'];
var $frag = $(document.createDocumentFragment());

arr.forEach( item => {
	$frag.append( '<p>' + item + '</p>' );
});

$box.append($frag);

 

documentFragment를 사용하여 append해준다면 이 문제를 해결할 수 있습니다.
documentFragment에 append하는 것은 가상의 메모리에서 일어나는 일이기 때문에 브라우저와는 상관이 없습니다.
페이지를 새로 그리는 것도 한번입니다.

 

출처 https://www.zerocho.com/category/jQuery/post/57c3a8821efc521700a70918