자바스크립트 Lazy Loading을 활용한 웹 애플리케이션의 메모리 누수 방지

10 Nov 2023

javascript

최근에는 대부분의 웹 애플리케이션이 동적으로 컨텐츠를 로드하고 렌더링하는 Lazy Loading 방식을 사용합니다. 이는 초기 로딩 시간을 줄이고 사용자 경험을 향상시킬 수 있는 장점이 있지만, 메모리 누수가 발생할 수 있는 가능성도 있습니다.

메모리 누수는 사용하지 않는 리소스가 메모리에 계속 쌓여 가비지 컬렉션을 방해하고, 애플리케이션의 성능을 저하시킬 수 있습니다. 따라서 Lazy Loading을 구현할 때는 메모리 누수를 방지하기 위해 몇 가지 주의사항을 따라야 합니다.

1. 이벤트 핸들러 관리

웹 페이지에서 동적으로 로드한 컨텐츠에는 보통 이벤트 핸들러가 필요합니다. 예를 들어, 이미지를 로드하는 동안 스크롤 이벤트에 대한 핸들러를 등록하고, 로딩이 완료되면 이벤트 핸들러를 제거하는 경우입니다. 이때 이벤트 핸들러를 올바르게 관리하지 않으면 핸들러들이 제대로 해제되지 않아 메모리 누수가 발생할 수 있습니다.

따라서 Lazy Loading을 구현할 때는 이벤트 핸들러를 등록할 때와 해제할 때 주의해야 합니다. 필요한 이벤트 핸들러만 등록하고, 컨텐츠가 삭제될 때 반드시 핸들러를 제거해야 합니다.

// 이벤트 핸들러 등록
element.addEventListener('scroll', handleScroll);

// 이벤트 핸들러 해제
element.removeEventListener('scroll', handleScroll);

2. 이미지 리소스 관리

Lazy Loading을 위해 이미지를 동적으로 로드하는 경우, 로드된 이미지는 사용하지 않을 때 즉시 메모리에서 해제해야 합니다. 그렇지 않으면 메모리가 지속적으로 증가하여 성능 문제를 야기할 수 있습니다.

이를 해결하기 위해 Lazy Loading 이미지 컴포넌트는 다음과 같은 기능을 갖추어야 합니다.

이미지가 보여질 때만 로드
이미지가 사라질 때 즉시 메모리에서 해제

예를 들어, Intersection Observer API를 사용하여 이미지가 화면에 보여지는지 감지하고, 로드된 이미지를 관리할 수 있습니다.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.getAttribute('data-src');
      observer.unobserve(image);
    } else {
      // 이미지가 화면에서 사라질 때 메모리에서 해제
      const image = entry.target;
      URL.revokeObjectURL(image.src);
    }
  });
});

// 이미지 요소 선택
const lazyImages = document.querySelectorAll('.lazy-image');

// Intersection Observer 등록
lazyImages.forEach((image) => {
  observer.observe(image);
});

Lazy Loading을 구현할 때에는 메모리 누수에 주의해야 하며, 이벤트 핸들러와 이미지 리소스를 올바르게 관리해야 합니다. 이렇게 하면 애플리케이션의 성능을 향상시키고 메모리 누수 문제를 방지할 수 있습니다.

#References

MDN Web Docs - Lazy Loading