[javascript] 자바스크립트에서의 가비지 컬렉션 성능 최적화 방법

05 Dec 2023

javascript

가비지 컬렉션(Garbage Collection)은 자바스크립트에서 메모리 관리를 위해 사용되는 중요한 기능입니다. 이 기능은 더 이상 사용되지 않는 변수와 객체를 자동으로 감지하여 메모리에서 제거합니다. 하지만 가비지 컬렉션은 동작하는 동안 일시적으로 프로그램의 실행을 멈추는 경우가 발생할 수 있습니다. 따라서 가비지 컬렉션의 성능을 최적화하는 것은 중요합니다. 이번 포스트에서는 자바스크립트에서 가비지 컬렉션 성능을 향상시키는 몇 가지 방법에 대해 살펴보겠습니다.

1. 변수 범위 제한

가비지 컬렉션은 변수의 범위(scope)에 따라 메모리를 할당 및 해제합니다. 변수의 범위를 최소화하여 메모리 소비를 줄일 수 있습니다. 예를 들어, 변수를 전역 범위 대신 함수 내부에 선언하면, 해당 함수가 실행을 완료한 후 가비지 컬렉션에 의해 자동으로 제거됩니다.

function someFunction() {
  var localVar = "Hello, world!"; // 변수의 범위를 함수 내부로 제한
  // localVar 사용
}

someFunction();

2. 참조 관리

가비지 컬렉션은 더 이상 사용되지 않는 객체를 제거합니다. 그러나 객체에 대한 참조를 관리하는 방법에 따라 가비지 컬렉션의 성능이 달라질 수 있습니다. 필요하지 않은 참조를 제거하고 순환 참조를 피하는 것이 중요합니다.

var obj1 = { name: "John" };
var obj2 = { name: "Jane" };

obj1.ref = obj2; // obj1은 obj2를 참조
obj2.ref = obj1; // obj2는 obj1을 참조

// obj1과 obj2는 더 이상 사용되지 않으므로 가비지 컬렉션에 의해 제거되지 않음

참조가 필요하지 않은 경우, null로 할당하여 객체와의 연결을 끊을 수 있습니다.

obj1.ref = null;
obj2.ref = null;

3. 대용량 데이터 처리 시 분할 작업

대용량 데이터를 처리할 때는 한 번에 모든 데이터를 처리하는 것보다 작은 블록 단위로 분할하여 처리하는 것이 성능에 도움이 됩니다. 분할 작업을 통해 가비지 컬렉션 동작을 조절할 수 있습니다.

var dataArray = [/* 대용량 데이터 */];

function processArray(array) {
  var batchSize = 100; // 처리할 블록 크기
  var currentBatch = 0;

  function processBatch() {
    for (var i = currentBatch; i < currentBatch + batchSize; i++) {
      // 데이터 처리
    }
    currentBatch += batchSize;

    if (currentBatch < array.length) {
      setTimeout(processBatch, 0); // 다음 블록 처리를 위해 비동기적으로 호출
    }
  }

  processBatch();
}

processArray(dataArray);

4. 메모리 누수 관리

가비지 컬렉션을 최적화하는 데 가장 중요한 부분 중 하나는 메모리 누수를 방지하는 것입니다. 메모리 누수는 사용이 끝난 객체에 대한 참조를 유지하여 가비지 컬렉션에서 제거되지 못하게 만듭니다. 메모리 누수를 방지하기 위해 사용이 끝난 객체에 대한 모든 참조를 해제해야 합니다.

function createLeak() {
  var element = document.createElement("div");
  document.body.appendChild(element);

  // 이벤트 리스너 등록
  element.addEventListener("click", function() {
    // element 사용
  });
}

createLeak();

위의 예제에서는 createLeak 함수가 실행될 때마다 div 요소를 생성하고 이벤트 리스너를 등록합니다. 그러나 div 요소가 사용되지 않아도 계속해서 메모리를 차지하게 되는 메모리 누수가 발생합니다. 이러한 경우, 이벤트 리스너를 제거하여 메모리 누수를 방지할 수 있습니다.

function createNoLeak() {
  var element = document.createElement("div");
  document.body.appendChild(element);

  function handleClick() {
    // element 사용
  }

  element.addEventListener("click", handleClick);

  // 사용이 끝난 후 이벤트 리스너 제거
  element.removeEventListener("click", handleClick);
}

createNoLeak();

결론

가비지 컬렉션은 자바스크립트의 메모리 관리에 불가피한 기능입니다. 하지만 성능을 최적화하기 위해 변수 범위를 제한하고 참조 관리를 신중하게 해야 합니다. 또한 대용량 데이터를 처리할 때는 분할 작업을 고려하고 메모리 누수를 방지하는 것이 중요합니다. 이러한 최적화 기법을 활용하여 자바스크립트 애플리케이션의 성능을 향상시킬 수 있습니다.

참고 자료

MDN Web Docs - 가비지 컬렉션