✻ 개요
자바스크립트 내의 모든 변수, 함수, 객체 등은 선언, 할당을 통해서 메모리를 점유한다. 만약 각 자료형이 더 이상 쓸 일이 없거나 참조할 대상이 없게 됐을 때 메모리를 해지하지 않으면 브라우저의 성능에 악영향을 미칠 수 있다.
자바스크립트 엔진이 이 메모리 삭제 문제를 어떻게 관리하는지 확인한다.
✻ 기준
기본적으로 '도달 가능성'에 기반해서 가비지 컬렉터(garbage collector)가 작동한다. 쉽게 말해서 어느 객체가 다른 객체를 참조하는 상태라면 도달 가능한 것이다.
let user = {
name: "John",
};
let user = null;user는 name이 john인 객체를 참조하기 때문에 도달 가능한 상태였다가 null이라는 비어 있는 값으로 재할당 돼서 도달 가능한 상태가 아니다.
따라서 name: "John"은 다른 객체에 의해서 참조되고 있지 않으므로 할당된 메모리가 해제된다.
let user = {
name: "John",
};
let admin = user;
user = null;user를 admin에 할당하였다. 이 경우엔 admin도 user가 가리키는 객체를 똑같이 참조한 경우고 나중에 user가 null이 되어도 name: "John"은 admin에 의해서 참조되고 있어서 가비지 컬렉터가 작동하지 않는다.
✻ mark-and-sweep
mark-and-sweep은 가비지 컬렉터를 수행하는 알고리즘이며 작동 원리는 다음과 같다.
✔︎ 루트(root) 정보를 수집하고 이를 ‘mark(기억)’
✔︎ 루트가 참조하고 있는 모든 객체를 방문하고 이것들을 ‘mark’
✔︎ mark 된 모든 객체에 방문하고 그 객체들이 참조하는 객체도 mark
✔︎ 한번 방문한 객체는 전부 mark 하기 때문에 같은 객체를 재방문하지 않는다
✔︎ 루트에서 도달 가능한 모든 객체를 방문할 때까지 위 과정을 반복하고 mark 되지 않은 모든 객체를 메모리에서 삭제합니다.
✻ 자발적 메모리 관리
✔︎사용하지 않은 객체, 변수는 모두 null 로 초기화
✔︎이벤트 핸들러를 바인딩 했다면, 모두 언바인딩
✔︎DOM 을 동적으로 생성했다면, 불필요한 객체, 속성(값)을 DOM 에 삽입하지 말자.
✔︎크롬 개발자도구의 Performace탭에서 timeline확인해보자.
참고
1) https://feel5ny.github.io/2017/11/30/JS_02/
2) https://ko.javascript.info/garbage-collection
3) https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management
4)https://engineering.huiseoul.com/자바스크립트는-어떻게-작동하는가-메모리-관리-4가지-흔한-메모리-누수-대처법-5b0d217d788d
