[자바스크립트] DocumentFragment 성능 개선 방법

DocumentFragment는 Document의 일종으로, DOM 요소들의 컨테이너 역할을 합니다. 일반적으로 DocumentFragment는 하나 이상의 DOM 요소를 생성하고, 그것들을 메모리에서만 관리하기 위해 사용됩니다.

DocumentFragment는 Document와는 다르게, 자체적으로 유효한 DOM 구조를 가지지 않습니다. 즉, DocumentFragment에는 자식 요소들이 있지만, 부모 요소는 존재하지 않습니다. 이러한 특징 때문에 DocumentFragment는 메모리에서만 관리되기 때문에, 실제 DOM 구조에는 영향을 주지 않으면서도 빠르게 처리할 수 있는 장점이 있습니다.

 

1. 예제 코드

DocumentFragment는 다음과 같은 방법으로 생성됩니다.

 

const fragment = document.createDocumentFragment();

위 코드는 새로운 DocumentFragment를 생성하고, 이를 fragment 변수에 할당합니다.

DocumentFragment를 사용하는 가장 일반적인 예는, 한번에 많은 수의 DOM 요소를 생성하는 경우입니다. 예를 들어, 테이블의 각 셀을 생성하는데 DocumentFragment를 사용할 수 있습니다.

const table = document.createElement('table');
const tbody = document.createElement('tbody');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 10; i++) {
  const tr = document.createElement('tr');
  const td1 = document.createElement('td');
  const td2 = document.createElement('td');
  td1.textContent = 'Row ' + i + ', Cell 1';
  td2.textContent = 'Row ' + i + ', Cell 2';
  tr.appendChild(td1);
  tr.appendChild(td2);
  fragment.appendChild(tr);
}

tbody.appendChild(fragment);
table.appendChild(tbody);

document.body.appendChild(table);

위 코드에서는 DocumentFragment를 사용하여 table 요소의 tbody 자식 요소들을 생성하고, 이를 한번에 tbody에 추가합니다. 이렇게 하면 DocumentFragment를 사용하지 않았을 때보다 훨씬 빠르게 DOM 요소를 생성할 수 있습니다.

 

2. 사용 이유

 

DocumentFragment는 다음과 같은 이유로 사용됩니다.

1) 성능 개선

DocumentFragment는 일반적인 DOM 요소처럼 실제 DOM 트리에 연결되지 않기 때문에, 요소를 메모리에서만 관리할 수 있습니다. 이를 통해 DOM 요소를 한번에 많이 생성하는 경우, DocumentFragment를 사용하면 실제 DOM 구조에 적용하기 전에 메모리상에서 처리할 수 있기 때문에 성능이 향상됩니다.

2) DOM 조작 개선

DocumentFragment를 사용하면 일련의 DOM 조작 작업을 수행할 수 있습니다. 예를 들어, 여러 요소를 appendChild로 추가하는 대신에, DocumentFragment에 추가하고 한번에 appendChild로 추가할 수 있습니다. 이렇게 하면 DOM 조작이 적게 일어나기 때문에, 불필요한 DOM 조작으로 인한 성능 문제를 해결할 수 있습니다.

3) 유지보수성 개선

DocumentFragment는 일반적인 DOM 요소와 달리 자체적으로 유효한 DOM 구조를 가지지 않습니다. 따라서 DocumentFragment를 사용하면, 여러 개의 DOM 요소를 생성하거나 조작할 때, 불필요한 중첩 구조를 만들지 않게 되어 유지보수성을 개선할 수 있습니다.

4) 렌더링 개선

DocumentFragment를 사용하여 여러 요소를 한번에 생성하는 경우, 렌더링 업데이트가 한번만 일어나기 때문에 브라우저의 렌더링 성능을 개선할 수 있습니다. 이는, 동일한 페이지에서 불필요한 렌더링이 계속해서 발생하는 경우에도 적용됩니다.

따라서, DocumentFragment는 DOM 조작 및 생성과 같은 작업에서 성능과 유지보수성을 개선할 수 있는 중요한 도구입니다.