[article] JavaScript Memory Management: How to Avoid Common Memory Leaks and Improve Performance

🌞 Article

👇 link

https://itnext.io/javascript-memory-management-how-to-avoid-common-memory-leaks-and-improve-performance-c018dbbca954

🔥 JavaScript Memory Management: How to Avoid Common Memory Leaks and Improve Performance

 

---

💬 정리하기

가비지 컬렉터는 더 이상 사용하지 않는 개체를 식별해 제거한다.
“mark and sweep”이라는 기술을 사용하여 메모리를 관리하는데, 사용 중인 객체를 표시한 후, 힙을 정리하고 표시되지 않은 객체를 제거한다.

Javascript 메모리와 관련하여 stack과 heap에 대해 간단히 얘기하자면,
stack은 함수 실행 중에만 필요한 데이터를 저장하는 데 사용된다. 제한된 stack 용량 내에서 빠른 액세스 및 빠른 메모리 관리에 용이하다.
반면 heap은 애플리케이션 전체 수명 동안 필요한 데이터를 저장하는 데 사용된다. 훨씬 큰 용량을 갖고 여러 번 액세스해야 하는 개체, 배열 및 기타 복잡한 데이터 구조를 저장하는 데 사용된다.

 

메모리 누수의 일반적인 원인으로는,
1. 둘 이상의 개체가 서로를 참조하는 순환 참조
2. 요소에서 사용하는 메모리를 해제하지 못하도록 하는 이벤트 리스너 함수에 대한 참조가 생성
3. 코드 전역에서 액세스 할 수 있는 전역 변수
가 있다.

우선, 순환 참조를 해결하는 방법으로는 delete 키워드를 사용해 직접 개체를 제거할 수 있다.
또한, WeakMap과 WeakSet을 사용하는 방법이 있다.

요소가 없더라도 이벤트 리스너는 여전히 해당 요소에 연결되어 있기 때문에, 요소가 더 이상 필요하지 않을 때 removeEventListener를 사용해 리스너를 제거해 주는 것이 중요하다.

Function Scoping 즉, 함수를 생성한 후, 해당 함수 내에서만 변수를 선언하여 스코프 자체를 함수로 할당시키는 방법을 사용하거나, 블록 범위 변수를 생성할 수 있도록 var 키워드 대신 let이나 const를 사용하는 방법으로 전역 변수에 대한 메모리 누수를 방지할 수 있다.

 

WeakMap과 WeakSet은 개체 및 변수에 대한 약한 참조를 만들 수 있는 특수 데이터 구조다. 약한 참조는 일반 참조와는 달리 가비지 컬렉터가 개체에서 사용하는 메모리를 해제하는 것을 막지 않는다. 
개체에 대한 참조가 약하기 때문에 가비지 컬렉터는 개체가 여전히 참조되고 있더라도 사용된 메모리를 해제할 수 있다.
해당 글만 읽어서는 조금 이해가 안 되어 따로 찾아본 후, 정리해 보았다.

https://ktmihs.tistory.com/entry/Javascript-WeakMap%EA%B3%BC-WeakSet

[Javascript] WeakMap과 WeakSet

 

가비지 컬렉터 API를 사용하여 메모리를 관리할 수도 있다. gc() 함수를 사용하여 수동으로 가비지 컬렉터를 트리거할 수 있다. 하지만 이 방법은 성능에 영향을 줄 수 있으므로 필요한 경우에만 사용하는 것이 좋다.

 

다른 방법으로는 heap snapshots 및 profiler를 사용하는 방법이 있다.
heap snapshots은 힙의 현재 상태에 대한 스냅샷을 만들고, 이를 분석하여 가장 많은 메모리를 사용하는 개체를 확인할 수 있다. 
profiler를 사용하면 애플리케이션의 성능을 추적하고 메모리 사용량이 높은 영역을 식별할 수 있다.
애플리케이션의 성능 추적을 시작하고 중지해, 보고서에 호출된 함수와 각 함수 메모리 사용량에 대한 정보를 확인할 수 있다.
이 두 가지는 모든 Javascript엔진 및 브라우저에서 지원되는 것은 아니기 때문에 호환성을 확인할 필요가 있다.

---

해당 아티클을 읽으며, 새로운 메모리 누수 해결 방법에 대해 알게 되었고, 학습할 수 있었다. 특히 WeakMap이나 WeakSet은 잘 사용하면 유용하게 사용할 수 있을 것 같다. 기본적인 리스너 제거나, 변수 범위 제한의 경우는 알고 있었지만, 나도 모르게 불필요하게 사용되던 메모리 누수를 체크할 방법과, 방지할 방법을 알게 된 것 같다.

이번 DEVIEW2023에서도 '런타임 데드 코드 분석 도구 Scavenger - 당신의 코드는 생각보다 많이 죽어있다'를 보며 메모리 누수에 대해서도 관심이 갔던 터라 흥미로운 글이었다.
못 간 1일 차 DEVIEW2023도 얼른 봐야지
FE단에서 메모리 누수가 많이 발생할까? 하는 생각을 했었던 과거를 반성하며😂 글을 읽을 수 있었다.