<div id="readability-page-1" class="page"><section itemprop="text">
 
 

<h2 id="0-들어가면서">0. 들어가면서</h2>

현재 프로젝트에서 첫 MVP 릴리즈 이후 클라이언트(브라우저) 애플리케이션에서 OOM(out of memory)가 의심되는 현상이 발견됬다. 사용자가 약 1시간 30분 정도 장시간 동안 애플리케이션을 사용하는 데, 중간에 화면이 멈추는 현상이 있다는 리포트를 받았다. 메모리 릭(memory leak)에 의해 가비지 컬렉팅(gc, garbage collecting)이 자주 일어나면서 프로세스가 멈춘 것처럼 보였을 것 같다고 추측했다. 크롬 개발자 도구를 사용해 의심 가는 코드를 고쳐 메모리 릭 문제는 해결했다. 관련된 내용은 조만간 정리할 예정이다.

이 글은 메모리 릭 문제를 해결할 때 동료와 짧게 이야기를 나눴던 크롬(chrome), 엣지(edge), 노드(node) 같은 자바스크립트 엔진에서 사용하는 가비지 컬렉터 알고리즘에 대해 정리하기 위한 글이다. 알고리즘 종류가 다양해서 별도 글로 작성했다.

<h2 id="1-reference-counting">1. Reference counting</h2>

참조 카운팅(reference counting)은 각 객체에 대한 참조 횟수를 추적한다. 참조 횟수가 0이 되면, 어떤 객체도 참조하지 않는 객체(더 이상 필요 없는 객체)가 된다. 해당 객체를 아무도 사용하지 않기 때문에 가비지 컬렉팅 대상이 된다. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management#reference-counting_garbage_collection">MDN 예시 코드</a>를 살펴보자.

<div><pre><code>let x = {
 a: {
 b: 2,
 },
};
</code></pre></div>

위 코드가 실행되면 두 개의 객체가 만들어진다. 하나는 프로퍼티에 의해 참조되는 객체와 다른 하나는 x 변수에 의해 참조되는 객체다.



y 변수를 사용해 x 변수가 참조하는 객체를 참조한다. 이런 상황에선 x 변수가 참조하는 객체의 레퍼런스 카운트는 “2”가 된다.

<img src="https://junhyunny.github.io/images/posts/2024/reference-counting-gc-in-javascript-01.png" width="80%">




x 변수에 다른 값을 할당하면 해당 객체의 참조 카운트는 1로 바뀐다.



<img src="https://junhyunny.github.io/images/posts/2024/reference-counting-gc-in-javascript-02.png" width="80%">




y 변수가 참조하는 객체의 a 프로퍼티로 참조하는 객체를 z 변수가 참조하도록 만든다.



이렇게 되면 처음 만든 객체의 a 프로퍼티가 참조하고 있는 객체의 참조 카운트는 2가 된다.

<img src="https://junhyunny.github.io/images/posts/2024/reference-counting-gc-in-javascript-03.png" width="80%">




y 변수에 다른 값을 할당하면 최초 x 변수가 참조했던 객체는 참조 카운트가 0이 된다.



가비지 컬렉팅 대상이 되어 객체가 삭제되지만, a 프로퍼티가 참조하던 객체는 z 변수에 의해 여전히 참조되므로 가비지 컬렉팅 대상이 되지 않는다.

<img src="https://junhyunny.github.io/images/posts/2024/reference-counting-gc-in-javascript-04.png" width="80%">




z 변수에 다른 값을 할당하면 내부 객체도 참조 카운트가 0이 되면서 가비지 컬렉팅 대상이 된다.



<img src="https://junhyunny.github.io/images/posts/2024/reference-counting-gc-in-javascript-05.png" width="80%">


<h2 id="2-disadvantages">2. Disadvantages</h2>

MDN 문서를 보면 다음과 같은 주의 사항을 볼 수 있다.

<blockquote>
 No modern JavaScript engine uses reference-counting for garbage collection anymore.
</blockquote>

모던 자바스크립트 엔진은 참조 카운팅 방식의 가비지 컬렉션을 사용하지 않는다. 구현하기 단순하고, 참조 카운팅이 0이 되는 순간 즉시 메모리를 회수할 수 있는 장점이 있지만, 순환 참조는 감지할 수 없다는 치명적인 단점이 있다. 순환 참조는 <a href="https://en.wikipedia.org/wiki/Reference_counting">위키피디아</a>에 명시된 주된 3가지 단점들 중 한가지다.

<ul>
 <li>참조 카운팅의 잦은 업데이트는 비효율적이다.</li>
 <li>순환 참조를 처리할 수 없다.</li>
 <li>동시성(concurrent) 상황이라면 모든 참조 카운팅 업데이트는 원자적 연산(atomic operation)이어야 한다. 이는 추가적인 비용이 필요하다.</li>
</ul>

시스템에서 명시적으로 순환 참조를 막거나 추적(tracing) 가비지 컬렉터를 함께 사용하는 방법 등으로 참조 카운팅의 순환 참조 문제를 보완한다. 주된 원인으로 뽑히는 순환 참조 상황을 MDN 예제 코드를 통해 살펴보자.

<div><pre><code>function f() {
 const x = {};
 const y = {};
 x.a = y; // x references y
 y.a = x; // y references x
 return "azerty";
}

f();
</code></pre></div>

함수 스코프가 끝나면 스택 메모리의 x, y 변수는 사라지지만, 각 a 프로퍼티를 통해 참조 중이기 때문에 참조 카운팅이 0이 되지 않는다. 가비지 컬레팅 대상이 되지 않아 메모리가 회수되지 않는다.

<img src="https://junhyunny.github.io/images/posts/2024/reference-counting-gc-in-javascript-06.png" width="80%">


<h2 id="closing">CLOSING</h2>

참조 카운팅 가비지 컬렉터는 치명적인 단점이 있기 때문에 모던 브라우저 등 자바스크립트 엔진에서 사용되지 않는다. 주로 사용하는 마크-앤-스윕(mark and sweep) 알고리즘은 다른 글을 통해 소개한다.

<h4 id="reference">REFERENCE</h4>

<ul>
 <li><a href="https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)">https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)</a></li>
 <li><a href="https://en.wikipedia.org/wiki/Reference_counting">https://en.wikipedia.org/wiki/Reference_counting</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management#reference-counting_garbage_collection">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management#reference-counting_garbage_collection</a></li>
 <li><a href="https://reactnext-central.xyz/blog/javascript/garbage-collection-in-javascript">https://reactnext-central.xyz/blog/javascript/garbage-collection-in-javascript</a></li>
</ul>

 
 </section></div>

Junhyunny's Devlogs

0. 들어가면서
현재 프로젝트에서 첫 MVP 릴리즈 이후 클라이언트(브라우저) 애플리케이션에서 OOM(out of memory)가 의심되는 현상이 발견됬다. 사용자가 약 1시간 30분 정도 장시간 동안 애플리케이션을 사용하는 데, 중간에 화면이 멈추는 현상이 있다는 리포트를 받았다. 메모리 릭(memory leak)에 의해 가비지 컬렉팅(gc, garbage collecting)이 자주 일어나면서 프로세스가 멈춘 것처럼 보였을 것 같다고 추측했다. 크롬 개발자 도구를 사용해 의심 가는 코드를 고쳐 메모리 릭 문제는 해결했다. 관련된 내용은 조만간 정리할 예정이다.
이 글은 메모리 릭 문제를 해결할 때 동료와 짧게 이야기를 나눴던 크롬(chrome), 엣지(edge), 노드(node) 같은 자바스크립트 엔진에서 사용하는 가비지 컬렉터 알고리즘에 대해 정리하기 위한 글이다. 알고리즘 종류가 다양해서 별도 글로 작성했다.
1. Reference counting
참조 카운팅(reference counting)은 각 객체에 대한 참조 횟수를 추적한다. 참조 횟수가 0이 되면, 어떤 객체도 참조하지 않는 객체(더 이상 필요 없는 객체)가 된다. 해당 객체를 아무도 사용하지 않기 때문에 가비지 컬렉팅 대상이 된다. MDN 예시 코드를 살펴보자.
let x = {
  a: {
    b: 2,
  },
};
위 코드가 실행되면 두 개의 객체가 만들어진다. 하나는 프로퍼티에 의해 참조되는 객체와 다른 하나는 x 변수에 의해 참조되는 객체다.
let y = x;
y 변수를 사용해 x 변수가 참조하는 객체를 참조한다. 이런 상황에선 x 변수가 참조하는 객체의 레퍼런스 카운트는 “2”가 된다.
x 변수에 다른 값을 할당하면 해당 객체의 참조 카운트는 1로 바뀐다.
x = 1;
y 변수가 참조하는 객체의 a 프로퍼티로 참조하는 객체를 z 변수가 참조하도록 만든다.
let z = y.a;
이렇게 되면 처음 만든 객체의 a 프로퍼티가 참조하고 있는 객체의 참조 카운트는 2가 된다.
y 변수에 다른 값을 할당하면 최초 x 변수가 참조했던 객체는 참조 카운트가 0이 된다.
y = "mozilla";
가비지 컬렉팅 대상이 되어 객체가 삭제되지만, a 프로퍼티가 참조하던 객체는 z 변수에 의해 여전히 참조되므로 가비지 컬렉팅 대상이 되지 않는다.
z 변수에 다른 값을 할당하면 내부 객체도 참조 카운트가 0이 되면서 가비지 컬렉팅 대상이 된다.
z = null;
2. Disadvantages
MDN 문서를 보면 다음과 같은 주의 사항을 볼 수 있다.
No modern JavaScript engine uses reference-counting for garbage collection anymore.
모던 자바스크립트 엔진은 참조 카운팅 방식의 가비지 컬렉션을 사용하지 않는다. 구현하기 단순하고, 참조 카운팅이 0이 되는 순간 즉시 메모리를 회수할 수 있는 장점이 있지만, 순환 참조는 감지할 수 없다는 치명적인 단점이 있다. 순환 참조는 위키피디아에 명시된 주된 3가지 단점들 중 한가지다.
참조 카운팅의 잦은 업데이트는 비효율적이다.
순환 참조를 처리할 수 없다.
동시성(concurrent) 상황이라면 모든 참조 카운팅 업데이트는 원자적 연산(atomic operation)이어야 한다. 이는 추가적인 비용이 필요하다.
시스템에서 명시적으로 순환 참조를 막거나 추적(tracing) 가비지 컬렉터를 함께 사용하는 방법 등으로 참조 카운팅의 순환 참조 문제를 보완한다. 주된 원인으로 뽑히는 순환 참조 상황을 MDN 예제 코드를 통해 살펴보자.
function f() {
  const x = {};
  const y = {};
  x.a = y; // x references y
  y.a = x; // y references x
  return "azerty";
}
f();
함수 스코프가 끝나면 스택 메모리의 x, y 변수는 사라지지만, 각 a 프로퍼티를 통해 참조 중이기 때문에 참조 카운팅이 0이 되지 않는다. 가비지 컬레팅 대상이 되지 않아 메모리가 회수되지 않는다.
CLOSING
참조 카운팅 가비지 컬렉터는 치명적인 단점이 있기 때문에 모던 브라우저 등 자바스크립트 엔진에서 사용되지 않는다. 주로 사용하는 마크-앤-스윕(mark and sweep) 알고리즘은 다른 글을 통해 소개한다.
REFERENCE
https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)
https://en.wikipedia.org/wiki/Reference_counting
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management#reference-counting_garbage_collection
https://reactnext-central.xyz/blog/javascript/garbage-collection-in-javascript

Reference counting GC(garbage collect) in JavaScript

댓글