DOM 사용 최소화 하기



DOM 사용 최소화 하기



노드 조각(document.createDocumentFragment), 노드 사본(elem.cloneNode), 문자 배열([])을 활용한 노드 추가 시 아래와 코드와 같이 DOM 접근을 최소화 하여 비용을 줄일 수 있다.




1. 기본적인 엘리먼트 추가 방법.



function notReflow() {

    var elem = document.getElementById('container');

    for (var i = 0; i < 10; i++) {
        var a = document.createElement('a');
        a.href = '#';
        a.appendChild(document.createTextNode('test' + i));
        elem.appendChild(a);
    }

    return false;
}




2. 노드 조각을 활용한 엘리먼트 추가 방법 



function notReflow() {

    var frag = document.createDocumentFragment();

    for (var i = 0; i < 10; i++) {
        var a = document.createElement('a');
        a.href = '#';
        a.appendChild(document.createTextNode('test' + i));
        frag.appendChild(a);
    }

    document.getElementById('container').appendChild(frag);

    return false;
}




3. 노드 사본을 활용한 엘리먼트 추가 방법 



function notReflow() {
 
    var elem = document.getElementById('container');
    var clone = elem.cloneNode(true);
 
    for (var i = 0; i < 10; i++) {
        var a = document.createElement('a');
        a.href = '#';
        a.appendChild(document.createTextNode('test' + i));
        clone.appendChild(a);
    }
 
    elem.appendChild(clone);
 
    return false;
}




4. 문자 배열을 활용한 엘리먼트 추가 방법 



function notReflow() {

    var h = [];

    for (var i = 0; i < 10; i++) {

        h.push('test' + i + '');
    }

    document.getElementById('container').innerHTML = h;

    return false;
}



상황별 테스트 결과:


첫 번째 상황: 153ms

두 번째 상황: 136ms

세 번째 상황: 129ms

네 번째 상황: 127ms



- 첫 번째 상황을 제외한 나머지 상황들은 성능 상 큰 차이를 보이지 않았지만, 객체 맴버(조각, 사본)를 사용한 방법보다 엘리먼트 속성인 innerHTML을 활용한 문자 배열 추가 방식이 좀 더 빠른 결과를 가져왔다.