웹 브라우저의 메모리 관리 - 가비지 컬렉션(Garbage Collection)

가비지 컬렉션

자바스크립트는 실행 환경에서 코드 실행중에 메모리를 관리합니다.
C나 C++ 같은 언어에서는 메모리 추적이 매우 중요한데 많은 개발자들이 이 때문에 골치 아파합니다.

자바스크립트는 필요한 메모리를 자동으로 할당하고 더 이상 사용하지 않는 메모리는 자동으로 회수하므로 개발자가 직접 메모리를 관리하지 않아도 됩니다. 자바스크립트의 가비지 컬렉터는 더이상 사용하지 않을 변수를 찾아내어 해당 변수가 차지하고있던 메모리를 회수합니다.

이 프로세스는 주기적으로 실행되는데, 코드 실행중에 특정 시점에서 메모리를 회수하도록 지정할 수도 있습니다.

표시하고 지우기

자바스크립트에서 가장 널리 사용하는 가비지 컬렉션 방법은 표시하고 지우기 'mak-and-sweep' 이라 불립니다.

변수가 특정 컨텍스트 안에서 사용할 것으로 정의되면 그 변수는 그 컨텍스트 안에 있는 것으로 표시됩니다. 컨텍스트 안에 존재하는 변수의 메모리는 해제해서는 안되는데, 해당 컨텍스트가 실행 중인 한 사용될 가능성이 있기 때문입니다.

과정

1. 가비지 컬렉터가 작동하면 메모리에 저장된 변수 전체에 표시를 남깁니다.
2. 그다음 컨텍스트에 있는 변수와, 컨텍스트에 있는 변수가 참조하는 변수에서 표시를 지웁니다.
   이 과정을 거친 다음에도 표시가 남아있는 변수는 컨텍스트에 있는 변수와 무관하므로 삭제해도 안전합니다.
3. 가비지 컬렉터는 메모리 청소를 실행해 표시가 남아있는 값을 모두 파괴하고 메모리를 회수합니다.

IE, Firefox, Opera, Chrome, Safari는 가비지 컬렉션 타이밍이 조금씩 다르긴 하지만 모두 표시하고 지우기 방식으로 가비지 컬렉션을 수행합니다.

참조 카운팅

각 값이 얼마나 많이 참조되었는지 추적하는 방식이지만 널리 사용되지는 않고있습니다.

과정

1. 변수를 선언하고 참조 값이 할당되면 참조 카운트는 1이 됩니다. 다른 변수가 같은 값을 참조하면 참조 카운트는 늘어납니다.
2. 값의 참조 카운트가 0이 되면 메모리를 회수해도 안전합니다.
3. 가비지 컬렉터를 실행할 때 참조 카운트가 0인 값에서 사용하던 메모리를 회수합니다.

그러나 참조 카운팅 방식은 '순환 참조' 라는 심각한 문제가 발견되어 잘 사용되지 않습니다.

* 순환참조 - 함수 실행이 끝난 뒤에도 참조 카운트가 0이 되지 않아 메모리가 계속 늘어나는 경우

성능과 메모리 관리

가비지 컬렉터는 주기적으로 실행되며 메모리 내에 할당된 변수가 많다면 상당한 비용이 드는 작업이므로 가비지 컬렉션을 실행하는 타이밍이 중요합니다. 또 가비지 컬렉터를 너무 자주 실행하게되면 성능 문제를 일으킵니다.

일반적으로 가비지 컬렉션을 지원하는 프로그래밍 환경(javascript 포함)에서는 개발자가 메모리 관리를 신경쓰지 않아도 됩니다.

하지만 JavaScript라는 환경에서 메모리 관리와 가비지 콜렉션은 다른 환경과는 매우 다릅니다.
웹 브라우저에서 사용할 수 있는 메모리는 일반적인 데스크톱 애플리케이션의 가용 메모리에 비해 매우 적습니다.

적은 메모리만 할당받는 주된 이유는 웹 페이지에서 실행하는 자바스크립트가 시스템 메모리를 전부 사용해서 운영체제를 다운시키는 일을 방지하기 위함입니다. 메모리 제한은 변수 할당 뿐만 아니라 호출 스택, 스레드에서 실행할 수 있는 문장 수에도 영향을 미칩니다.

가능한 한 최소한의 메모리만 사용해야 페이지 성능을 올릴 수 있습니다.

메모리 사용을 최적화하는 가장 좋은 방법은 코드 실행에 필요한 데이터만 유지하는 것입니다.
필요 없어진 데이터에는 null 을 할당하여 참조를 제거하는 편이 좋습니다. 수동으로 참조 제거 해야할 대상은 주로 전역변수와 전역 객체의 프로퍼티입니다. 지역 변수는 컨택스트를 빠져나가는 순간 자동으로 참조가 제거됩니다. (제거할 필요가 없습니다.

출처: 프론트앤드를 위한 자바스크립트