JavaScript-documentFragment

documentFragment

DocumentFragment은 웹 문서의 메인 DOM 트리에 포함되지 않는,
가상 메모리에 존재하는 DOM 노드 객체이다.
DocumentFragment 노드를 사용하면 메인 DOM 트리 외부에 경량화된 DOM을 만들 수 있어
브라우저 repaint 영향 없이 메모리에서 DOM 조작이 가능하다.

실무에서는 화면에 태그를 추가할 때 creatElement로 만들어서 실제 태그에 바로 추가(append)하는 방식을 잘 사용하지 않는다. document.creatDocumentFragment 메서드로 메모리 안에서만 존재하는 documentFragment를 만들고, documentFragment 안에 필요한 태그를 추가(append)한 뒤 마지막으로 $table에 한 번에 documentFragment를 추가하는 방식을 사용한다.

예시

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