효율적인 DOM 조작으로 성능 최적화하기

웹 애플리케이션에서 DOM을 조작하는 작업은 성능에 큰 영향을 미친다. 최근에 메모리 효율적인 DOM 조작을 위한 여러 가지 패턴을 소개하는 글을 읽었는데, 간단하게 정리해 보았다.

1. 요소 숨기기/보이기 대신 생성/삭제 피하기 

DOM에서 동적으로 요소를 생성하고 삭제하는 작업은 성능에 부담을 줄 수 있다. 예를 들어, 리스트 항목을 동적으로 추가하거나 삭제하는 경우, 매번 리렌더링이 발생하고 메모리도 다시 할당되기 때문에 성능에 영향을 미치는데 해당 문제를 해결하려면, 요소를 삭제하거나 추가하는 대신, 이미 존재하는 요소를 숨기거나 보이게 하는 방법을 사용하는 게 훨씬 효율적이다. 

const el = document.querySelector('#element');
el.classList.add('show'); // 요소를 보이게 함
el.style.display = 'none'; // 요소를 숨김

 

이 방법은 DOM을 계속해서 수정하지 않고, 기존의 요소를 보여주거나 숨기는 방식으로 성능을 개선할 수 있다. 특히 리스트 항목처럼 자주 추가되고 제거되는 요소가 있을 때 유용하다.

2. textContent 사용

innerText와 textContent는 텍스트를 다룰 때 자주 사용되는데, innerText는 스타일 계산을 포함한 렌더링을 고려하므로 성능에 영향을 미칠 수 있다. textContent는 스타일을 고려하지 않고, 텍스트 내용을 그대로 반환하기 때문에 더 빠르고 효율적이다.

const el = document.querySelector('#element');
el.textContent = '새로운 텍스트';

 

3. insertAdjacentHTML 활용

HTML을 동적으로 삽입할 때, innerHTML보다는 insertAdjacentHTML을 사용하는 것이 성능적으로 훨씬 더 좋다. insertAdjacentHTML은 문자열로 HTML을 삽입할 수 있고, 해당 방식은 DOM을 다시 파싱 하지 않으므로 대량의 콘텐츠를 삽입할 때 성능을 크게 개선할 수 있다.

const el = document.querySelector('#element');
el.insertAdjacentHTML('beforeend', '<div>추가된 내용</div>');

4. 이벤트 위임 사용

동적으로 생성되는 많은 요소에 대해 개별적으로 이벤트를 바인딩하는 대신, 이벤트 위임을 사용하는 것이 성능에 훨씬 유리하다. 이벤트 위임은 부모 요소에 이벤트 리스너를 설정하고, 자식 요소에서 발생한 이벤트를 부모에서 처리하는 방식인데, 해당 방식을 사용하면 메모리 사용을 줄이고, 각 요소마다 이벤트 리스너를 설정할 필요가 없어져 성능이 개선된다. 

const parent = document.querySelector('#parent');
parent.addEventListener('click', function(event) {
  if (event.target && event.target.matches('button')) {
    console.log('버튼 클릭됨');
  }
});

 

5. 이벤트 리스너 정리

웹 애플리케이션에서 이벤트 리스너는 자주 사용되지만, 이를 제대로 정리하지 않으면 메모리 누수나 성능 저하의 원인이 될 수 있다. 기본적으로 removeEventListener를 사용하여 수동으로 이벤트를 제거할 수 있다.

function handleClick() {
  console.log("Button was clicked!");
  el.removeEventListener("click", handleClick); // 클릭 후 이벤트 리스너 제거
}

// 버튼에 클릭 이벤트 리스너 추가
const el = document.querySelector("#button");
el.addEventListener("click", handleClick);

 

다만, removeEventListener를 사용하지 않고도, 한 번만 호출되는 이벤트를 설정할 수 있는 방법이 있는데, once 옵션을 사용하면, 이벤트 리스너는 한 번 호출된 후 자동으로 제거된다.

el.addEventListener('click', handleClick, {
  once: true // 클릭이 발생하면 한 번만 호출되고 자동으로 제거됨
});

 

해당 옵션을 사용하면, 이벤트 리스너는 한 번만 실행되고 그 후 자동으로 제거되기 때문에,  이벤트를 한 번만 처리하면 되는 경우에 사용하면 매우 유용하다.

6. requestAnimationFrame과 setTimeout의 적절한 사용

애니메이션을 구현할 때는 requestAnimationFrame과 setTimeout의 차이를 이해하는 것이 매우 중요한데, requestAnimationFrame은 브라우저의 화면 갱신 주기에 맞춰 애니메이션을 실행하도록 도와준다. 반면, setTimeout은 정확한 타이밍을 보장하지 않아서 애니메이션을 구현할 때는 적합하지 않다.

function animate() {

  requestAnimationFrame(animate); // 다음 리페인트 주기에 애니메이션 실행
}
requestAnimationFrame(animate);

 

++ 이와 관련해서, 이전에 requestAnimationFrame을 적용하여 성능을 비교하는 글을 작성한 적이 있었다.