더 좋은 퍼포먼스를 위한 createDocumentFragment

자바스크립트에서 DOM 객체에 접근을 하는 것은 DOM tree 자료구조에서 접근할 엘리먼트의 위치와 좌표의 계산(페이지 reflow)을 유발하기 때문에 퍼포먼스를 저하시키는 주요 요인이다. 이를 해결하기 위해서 createDocumentFragment 메서드를 사용할 수 있다.

document.createDocumentFragment()

이 메서드는 새로운 빈 DocumentFragment를 생성한다. docFrag는 메인 DOM 트리의 일부가 되지 않지만 DOM 트리처럼 작동하고 단지 메모리 내에만 따로 존재한다. 이것을 다큐먼트 조각이라 한다. 이것에 자식 요소를 추가하는 것은 DocumentFragment가 DOM tree와 별개로 존재하기 때문에 접근 속도가 빠르다. 따라서, 페이지 reflow를 유발하지 않고 더 좋은 퍼포먼스를 가져온다.

아래는 일반적인 DOM 객체에 접근한 예시이다.

const list = document.querySelector('.list');

for (var i = 0; i < 100; i++) {
    const div = document.createElement('div');
    div.textContent = 'text';

    //반복문을 돌 때 매번 DOM tree에 접근하고 자식요소로 div를 넣어준다.
    target.append(div);
}

createDocumentFragment 메서드를 사용한 예시이다.

const list = document.querySelector('.list');
const docFrag = document.createDocumentFragment();

for (var i = 0; i < 100; i++) {
    const div = document.createElement('div');
    div.textContent = 'text';

    //반복문을 돌 때 DOM tree 자료구조에 접근하지 않는다.
    docFrag.append(div);
}
// 한번에 넣어준다. better performance
target.append(docFrag);

※ DocumentFragment 와 createElement 의 차이점

1. DocumentFragment는 어떤 종류의 노드도 가질 수 있지만, createElement는 그렇지않다.
2. DocumentFragment를 DOM에 추가해도 DocumentFragment 자체는 추가되지 않고 노드의 내용만 추가된다. createElement는 Element 자체도 추가된다.
3. DocumentFragment를 DOM에 추가하면 해당 노드의 내용은 추가되는 위치로 이전되고, 메모리상에서 지워진다. createElement는 메모리상에 계속 존재한다.