[JavaScript] Document.createDocumentFragment() 함수

Document.createDocumentFragment()

새로운 빈  DocumentFragment  를 생성한다.

Syntax

var docFragment = document.createDocumentFragment();

Description

 DocumentFragment  는 DOM 노드이다.

일반적으로 document fragment(조각) 을 생성하고, element들을 document fragment 에 추가한 뒤, 그 document fragment 를 DOM 트리에 추가한다.

 

메모리 내에 document fragment 가 존재하고 메인 DOM 트리의 일부가 아니라면, 이것에 자식들을 추가하는 것은 페이지 reflow (element 의 위치와 좌표의 계산) 를 유발하지 않는다.

 

따라서, document fragment 를 사용하는 것은 보통 더 나은 성능의 결과를 가져온다.

Example

var ul = document.getElementsByTagName("ul")[0]; // assuming it exists
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Firefox", "Safari", "Chrome", "opera"];

browserList.forEach(function(e) {
	var li = document.createElement("li");
    li.textContent = e;
    docfrag = appendChild(li);
});

ul.appendChild(docfrag);
// a list with well-known web browsers

출처 : https://developer.mozilla.org/ko/docs/Web/API/Document/createDocumentFragment