[DOM] 문서조각을 이용한 새로운 노드 추가

DOM 업데이트시 브라우저는 화면을 다시 그리고(repaint), 엘리먼트를 재구조화(reflow)하는데, 이 또한 비용이 많이 드는 작업이다.
원칙적으로 DOM 업데이트를 최소화하는 게 좋다. 
문서 조각을 생성해 외부에서 수정한 후, 처리가 완전히 끝난 다음에 실제 DOM에 추가하는 방법이 있다.

var p, t, frag;
 
frag = document.createDocumentFragment();
 
p = document.createElement('p');
t = document.createTextNode('first paragraph');
p.appendChild(t);
frag.appendChild(p);
 
p = document.createElement('p');
t = document.createTextNode('second paragraph');
p.appendChild(t);
frag.appendChild(p);
 
document.body.appendChild(frag);