🧩 오늘 한 일

• DocumentFragment의 개념과 용도
• createDocumentFragment와 createElement의 차이점

🧠 배운 점 / 새로 알게 된 점

DocumentFragment란 DOM 트리에는 존재하지 않고 메모리상(가상 메모리)에 존재하는 DOM 노드 객체이다.

DocumentFragment는 DOM에 반영되기 전까지 DOM 트리가 아닌 메모리상에서만 존재하기 때문에 구조에 변경이 일어나도 브라우저가 다시 화면을 렌더링하지 않는다.

→ 불필요한 reflow나 repaint가 발생하지 않아 성능 최적화를 위해 사용된다.

// 일반 DOM 삽입
for(...) {
	const div = document.createElement('div');
	container.appendChild(div);
}

해당 방식은 일반 DOM 조작 방식인데 매번 appendChild할 때마다 reflow, repaint가 발생한다.

// DocumentFragment 사용
const frag = document.createDocumentFragment();

for(...) {
	const div = document.createElement('div');
	frag.appendChild(div);
}

container.appenChild(frag);

해당 방식이 DocumentFragment를 사용하여 조작하는 방식인데, frag.appendChild()를 하여도 메모리 상의 가상 DOM 컨테이너이므로 브라우저가 reflow/repaint를 발생시키지 않는다.

→ 최종적으로 container.appendChild(frag) 딱 1번만 reflow/repaint가 발생한다.

💬 느낀 점 / 고민한 점

DocumentFragment에 대해 공부하다가 velog에 올라온 성능 비교 글을 보았다.

해당 글에서는 “루트 노드를 createElement로 만들었을 때가 createDocumentFragment보다 더 빠르게 나왔다”는 실험 결과를 제시하고 있었고, 이는 내가 처음 기대했던 DocumentFragment 기반의 접근 방식과는 반대되는 결과였다.

10,000개의 노드를 한꺼번에 루트 객체에 담아 DOM에 접근하는 테스트였는데, 이 실험에서 오히려 createElement 기반의 루트가 더 좋은 성능을 보였다는 점이 인상 깊었다.