모던 자바스크립트를 읽다가 흥미로운 이야기가 있어 블로그를 쓰게 되었다.
결론부터 이야기 하면 제목과 똑같이 appendChild를 사용할 때 좀 더 효율적으로 사용할 수 있는 방법에 대해 알아보려 한다.
비효율적인 방법들을 먼저 보고 DocumentFragment를 사용한 효율적인 방법을 알아보자.
첫번째 방법(가장 비효율적)
우선 아래와 같이 작성을 하게 되면 DOM에 3번 추가하므로 DOM이 3번 변경되게 된다. DOM을 변경하는 것은 높은 비용이 드는 처리이기 때문에 가급적 횟수를 줄이는 것이 성능에 좋다.
즉, 아래와 같이 DOM에 요소 노드를 추가하는 방법은 비효율적이다.
<body>
<ul class="celebrity">내가 좋아하는 연예인</ul>
<script>
const myUl = document.querySelector('.celebrity');
['박보영', '조미연', '임지연'].forEach(text => {
const myLi = document.createElement('li');
const myText = document.createTextNode(text)
myLi.appendChild(myText);
myUl.appendChild(myLi);
});
</script>
</body>두번째 방법(비효율적)
아래와 같이 하면 DOM에 1번만 추가하게 되어 성능에는 좋지만 불필요한 div가 DOM에 추가되는 부작용이 생긴다.
즉, 바람직한 방법이 아니다.
<body>
<ul class="celebrity">내가 좋아하는 연예인</ul>
<script>
const myUl = document.querySelector('.celebrity');
const myContainer = document.createElement('div');
['박보영', '조미연', '임지연'].forEach(text => {
const myLi = document.createElement('li');
const myText = document.createTextNode(text)
myLi.appendChild(myText);
myContainer.appendChild(myLi);
});
myUl.appendChild(myContainer);
</script>
</body>세번째 방법(효율적)
DocumentFragment노드를 통해 효과적으로 해결해 보았다. DocumentFragment노드는 별도의 서브 DOM을 구성하여 기존 DOM에 추가하기 위한 용도로 사용된다. DocumentFragment노드는 기존 DOM과는 별도로 존재하기 때문에 DocumentFragment 노드를 DOM에 추가하면 자신은 제거되고 자신의 자식 노드만 DOM에 추가된다.
즉, 아래와 같은 방법을 사용하는 것이 효율적이다.
<body>
<ul class="celebrity">내가 좋아하는 연예인</ul>
<script>
const myUl = document.querySelector('.celebrity');
const myFragment = new DocumentFragment();
['박보영', '조미연', '임지연'].forEach(text => {
const myLi = document.createElement('li');
const myText = document.createTextNode(text)
myLi.appendChild(myText);
myFragment.appendChild(myLi);
});
myUl.appendChild(myFragment);
</script>
</body>
나의 기억저장소