자바스크립트 메모리 관리

  • C 같은 저수준 언어에서는 malloc() 과 free()를 사용해 수동으로, 자바스크립트에서는 자동으로 메모리를 할당·해제합니다.

  • 자바스크립트는 객체가 생성될 때 메모리를 할당하고 사용하지 않는 변수는 자바스크립트 엔진 내 가비지 컬렉터(garbage collector)가 삭제합니다.

메모리 누수

  • 자바스크립트 엔진의 가비지 컬렉터가 메모리를 올바른 방식으로 해제하지 않은 경우 발생할 수 있습니다.

    • 메모리 누수로 인해 성능이 떨어지고, 프로그램이 중단됩니다.

1. 객체에 대한 참조

  • 객체가 참조 중이면 해당 객체는 메모리에 존재합니다.

    let memory = {
  key1: func(), // 5KB
  key2: func(),  // 5KB
};

// key1 속성에 접근하기 위해서 memory 객체 전체를 함수 범위에 포함
const clickEvent = () => {
  alert(obj.key1); // 10KB
}

2. DOM 메모리 누수

  • DOM 함수를 가리키는 변수가 이벤트 콜백 외부에 선언된 경우 해당 DOM 항목을 제거해도 해당 항목은 메모리에 남습니다.

    <div id="first">First</div>
<div id="second">Second</div>
    let first = document.getElementById("first");
let second = document.getElementById("second");

first.addEventListener("click", () => {
  second.remove();
  console.log(second); // 제거해도 출력(메모리 누수)
});

  • 메모리 누수 막는 방법

  • 이벤트 핸들러 콜백 범위 내에 제거할 DOM 항목 선언하고 항목 제거

     let first = document.getElementById("first");

 first.addEventListener("click", () => {
   let second = document.getElementById("second");
   second.remove();
 });

  • 이벤트 사용 후 등록 해지

     let first = document.getElementById("first");

 first.addEventListener("click", () => {
   let second = document.getElementById("second");
   second.remove();
 });
 first.removeEventListener("click");

    3. window 전역 객체

  • window 전역 객체에 포함되는 객체는 메모리에 존재합니다.

    var global = "🌎";
window.global // "🌎"

    • 전역 속성으로 추가된 객체(전역변수)는 제거할 수 없습니다.

    • 따라서 가능하면 var로 선언한 전역변수를 사용하지 않는 것이 메모리 절약에 유리합니다.

    • 필수적이지 않은 전역변수는 함수 내부로 위치를 이동할 수 있습니다.

4. 객체 참조 제한

  • 함수에 객체의 전체 범위가 아닌 필요한 부분만 참조하여 과도한 메모리 사용을 최소화해야 합니다.

  • 객체 전체보다는 객체의 속성만 전달합니다.

    let obj = {
  key1: "value1",
  key2: "value2"s
}

/* 💣 
const printValue = (obj) => {
  console.log(obj.key1);
}

printValue(obj); // "value1" */

// 👍
const printValue = (key) => {
  console.log(key);
}

printValue(obj.key1); // "value1"

5. delete 연산자

  • 불필요한 객체 속성 제거하기 위해 delete 연산자 사용합니다.

    let obj = {
  key1: "value1",
  key2: "value2"s
}

delete obj.key2;
console.log(obj.key2); // undefined

Reference

자바스크립트의 메모리관리 - JavaScript | MDN

<자바스크립트로 하는 자료구조와 알고리즘> by.배세민

PreviousJavaScriptNextJavaScript

Last updated