DOM 사용 최소화 하기
Javascript 2012. 7. 1. 15:58
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을 활용한 문자 배열 추가 방식이 좀 더 빠른 결과를 가져왔다.