DocumentFragment를 이용한 JavaScript 성능 최적화

자바스크립트의 DOM 객체는 연산을 수행할 때마다 DOM tree라는 자료구조에 접근해야 하기 때문에 자바스크립트의 성능을 저하시키는 주된 요인 중 하나이다. 따라서, 자바스크립트의 성능을 최적화하기 위해서는 DOM 객체 접근을 최소화하도록 코드를 작성해야 한다.

[그림 1] DOM tree의 구조

직관적으로, id가 list인 DOM 객체 내의 한 요소에 접근하여 해당 객체에 div 태그를 추가하는 코드를 작성하면 아래의 [코드 1]과 같이 작성할 것이다.

function addElements() {
    var target = document.getElementById('list');
 
    for (var i = 0; i < 100; i++) {
        var div = document.createElement('div');
 
        div.innerText = 'div';
        target.appendChild(div);
    }
}

[코드 1] 최적화되지 않은 DOM 객체 연산

아래의 [코드 2]와 같이 자바스크립트에서 제공하는 DocumentFragment 객체를 이용하면 [코드 1]과 같은 상황에서 DOM 객체 접근을 최소화할 수 있다. DocumentFragment 객체를 이용하여 자바스크립트의 성능을 최적화한 코드는 아래와 같다.

function addElements() {
    var target = document.getElementById('list');
    var docFrag = document.createDocumentFragment();
 
    for (var i = 0; i < 100; i++) {
        var div = document.createElement('div');
 
        div.innerText = 'div';
        docFrag.appendChild(div);
    }
    target.appendChild(docFrag.cloneNode(true));
}

[코드 2] DocumentFragment를 이용한 최적화된 DOM 객체 연산

최신 브라우저의 경우에는 리플로우(reflow)가 발생하지 않도록 엔진을 최적화하기 때문에 DocumentFragment 객체를 사용할 때 발생하는 성능 향상을 체감할 수 없는 경우도 있다. 그러나 막대한 크기의 DOM 객체에 대한 다수의 접근을 필요로하는 작업을 수행해야하는 상황에서 DocumentFragment 객체를 이용한다면, 만족할만한 성능 향상을 기대할 수 있을 것이다.