JavaScript의 값 저장과 메모리

JavaScript는 모든 값을 객체 그래프로 저장한다. (예를 들면 Root는 window 객체가 될 수 있다.)
가비지 콜렉터의 루트는 브라우저에 의해 생성되고 소멸되기 때문에 사용자가 제어할 수 없다.

그렇다면 값은 언제 가비지가 될까?

루트에서 해당 값으로 갈 수 있는 경로가 없을 때 가비지가 된다.

만약, DOM 트리에서 도달할 수 없지만 특정 객체에서 여전히 참조하고 있는 노드가 있는 경우 메모리 누수가 발생한다.

또한, 캐시의 크기 제한을 두지 않은채 불필요한 캐시를 저장하고 있거나, 불필요한 이벤트 리스너 등 과도한 스크립트, 동적으로 생성된 DOM요소의 누적 등 더 많은 메모리를 소모하는 Bloat 현상이 발생하기도 한다.

이렇게 낭비되는 메모리를 회수하기 위해 JavaScript는 가비지 콜렉터를 통해 도달할 수 없는 값을 가비지로 판단해 수집한다. 브라우저는 이를 언제 수행할지 결정하게된다.

가비지 컬렉션 실행 순서

먼저 메모리를 두 세대로 나눠 값이 저장된 지 오래된 영역과 새로 저장된 영역으로 나눈다.
새로 저장된 영역은 to 공간과 from 공간으로 나뉜다.
새로 저장된 값, 객체들을 to 공간에 생성한 뒤 to 공간이 가득차면 가비지 컬렉션을 실행한다.
이후 살아있는 객체만 from 공간으로 이동시킨다.
to 공간과 from 공간의 역할을 바꿔 다시 진행한다.
이 과정을 몇 번 거친 뒤 남은 객체들을 오래된 영역으로 옮긴다.

가비지 컬렉터가 값을 판단하는 방법으로 두가지 알고리즘을 적용하고 있다.

가비지 컬렉션이 실행되면 먼저, 마크 단계에서 루트부터 접근가능한 모든 객체를 사용 중으로 표시한다.
이를 통해 도달 할 수 있는 모든 객체가 표시된다.

이후 스윕 단계를 통해 모든 메모리를 처음 부터 끝까지 스캔하여 사용중으로 표시된 모든 객체를 검사한다.
사용중으로 표시되지 않은 객체의 메모리를 해제하고 표시된 사용 플래그를 지우고 다음 사이클을 준비한다.

이 과정에서 마킹을 진행하는 동안 메모리가 변경되면 다시 마킹해야하기 때문에 모든 작업이 중지된다.

💡 메모리 단편화

가비지를 스윕한 뒤 메모리를 확인하면 가비지가 있던 메모리가 비어 있게 된다.
이를 메모리 단편화라고 한다. 이를 위해 다음과 같은 방식을 도입하게 되었다.

이러한 문제들을 해결하기 위해 가비지 컬렉터는 마킹단계에서 객체를 흰색, 회색, 검정색 세가지 색으로 구분해 표시하는 트리 컬러 마킹 알고리즘을 사용한다.

흰색은 아직 검사하지 않은 객체, 회색은 검사는 했지만 모든 참조를 확인하지 않은 객체, 검정색은 완전히 검사한 객체이다.

이러한 방식을 중간에 컬렉팅을 중단해도 회색으로 마킹된 메모리만 확인하면 되기 때문에 여러번에 걸쳐 컬렉팅을 수행할 수 있게된다.

이후에 스윕단계를 통해 흰색으로 마킹된 객체들의 메모리를 해제하게 된다.

먼저 Free-list에 대해 알아야한다.

Free-list는 할당 가능한 빈 메모리 블록들의 집합이고 메모리 블록들은 연결리스트로 이루어져있다.

스윕단계를 거쳐 메모리를 해제한 뒤 해당 주소를 Free-list에 넘기게 되면 주소와 크기를 확인해 추가하게 되는데, 이때 인접한 블록들을 확인해 가능한 경우 병합하게 된다.

이러한 과정을 통해 단편화를 줄이고 효율적인 할당이 가능하게 한다.