자바스크립트 메모리 관리

자바스크립트 엔진이 데이터를 저장할 수 있는 두 곳이 있다. 메모리 힙과 스택이다.

• Heap: dynamic memory allocation
• object, function을 저장하는 장소. 스택과 달리 정해진 양만큼 할당하는 것이 아니고 필요에 따라 늘어날 수 있다. 데이터 사이즈는 런타임에 알 수 있다. 이 프로세스는 dynamic memory allocation이라고 한다.
• Stack: static memory allocation
• 스태틱 데이터를 저장하기 위해 사용하는 자료 구조. 스태틱 데이터는 엔진이 컴파일 타임에 사이즈를 아는 데이터. (Prmitive values and references) 사이즈를 이미 알고 있기 때문에 정해진 양의 메모리만 할당한다. 실행 직전에 메모리를 할당하는 프로세스는 static memory allocation이라고 한다. 이미 정해진 양 만큼만 할당하기 때문에, 이 값들은 원시 값 크기에 제한이 있다는 것을 의미한다. 이 제한과 전체 스택 사이즈는 브라우저에 따라 다르다.

모든 변수들은 처음에 스택을 가리킨다. 만약 non-primitive한 값이라면, 스택은 힙에 있는 해당 객체에 대한 reference를 가진다. 힙 메모리는 정렬되어 있지 않기 때문에 스택은 레퍼런스를 가지고 있어야 한다. reference는 객체들의 주소라고 볼 수 있고, 그 객체들은 스택의 해당 주소가 가리키는 힙에 존재한다.

Release Step - Garbage collector

자바스크립트 엔진이 어떤 변수나 함수가 더 이상 필요치 않다고 판단했을 시, 사용하고 있던 메모리를 릴리즈한다.

중요한 문제는 이 메모리가 계속 필요한지 아닌지를 판단하는 게 어렵다는 것이다. 즉 정확한 시점에 이 메모리가 여전히 필요한지를 판단하는 알고리즘은 없다는 것. 대신 대략적인 짐작을 해주는 알고리즘이 몇 있다.

Reference counting garbage collection

참조가 없는 객체들을 가비지로 분류한다. 이 알고리즘의 문제는 사이클 레퍼런스를 고려하지 못한다는 것이다.

Mark and Sweep algorithm

루트 오브젝트로부터 reachable한지 감지한다. 리처블하지 않은 것은 가비지로 마크하고, 나중에 sweep(release)해버린다. 2012년 이후 모든 모던 브라우저가 이 코어 아이디어를 이식했다.

가비지 콜렉팅 비용

알고리즘이 정확히 어느 시점에 메모리 할당이 필요 없어지는지 알 수 없기 때문에 필요 이상의 메모리를 사용할 수 있다. 가비지로 분류되더라도 그걸 언제 릴리즈할지는 가비지 콜렉터에게 달렸다. 고로 메모리를 더 효율적으로 쓰고자 한다면 로우 언어를 사용하는게 낫다.

메모리 릭(Memory Leaks)

• 전역 변수(Global Variables)
• 타이머, 콜백
  • 특히 SPA에서 주의. 다른 페이지를 보고 있을 때조차 백그라운드에서 진행되고 있을 테니까.
  • 이벤트 리스너 콜백같은 경우 예전 브라우저에서는 remove하지 않으면 문제가 되었지만 최신 브라우저들에서는 다 제거해주나봄.

Ref

https://felixgerschau.com/javascript-memory-management/

JavaScript's Memory Management Explained