[javascript] JS 메모리 누수(memory leak) 체크하기

Blocker :

작업 중인 프로잭트의 화면에서 특정 동작을 실행하면 무한 로딩 후 아래와 같은 화면이 나왔습니다.

이런 경우 메모리쪽에서 문제가 발생할 가능성이 높이 메모리를 체크해보기로 했습니다.

보통 서버가 느려지는 경우도 메모리 누수가 발생했을 가능성이 높아 메모리를 체크해보는 것이 좋습니다.

Out of Memory

 

메모리 누수(memory leak)란?
간단하게 설명하면 사용하지 않는 메모리를 해제하지 않고 있는 것을 말합니다.

js의 경우 가비지 컬렉션 메커니즘이 자동 정리라 보통은 메모리 할당과 비우는 과정을 신경쓰지 않아도 되지만 페이지가 느려지거나 아예 에러가 나는 경우 메모리 누수가 원인일 수 있어 안 쓰는 메모리를 정리해줘야 합니다.

---

해결방법 :

메모리는 개발자도구의 여러가지 기능을 통해 체크할 수 있습니다.

 

1. Memory 탭의 Heap snapShot

메모리 누수를 발생시키는 걸로 의심되는 동작을 진행하며 snapshot을 찍습니다.

 

동작을 할 때마다 스냅샷의 용량이 늘어나면 이 동작이 메모리 누수를 발생한다고 의심해볼 수 있습니다.

 

 

 

2. Memory 탭의 Allocation instrumentation on timeline

start를 누르고 의심이 가는 동작을 실행한 뒤 멈춥니다.

그러면 아래와 같이 메모리 사용량을 시각적으로 확인할 수 있습니다.

 

파란 선은 메모리에 할당된 자바스크립트 객체의 총 크기를,

회색 선은 메모리에서 해제된 자바스크립트 객체의 총 크기를 의미합니다.

따라서 파란 선이 선명하게 보인다면 해당 데이터가 메모리에서 해제되지 않았다는 의미입니다.

 

이 그래프를 통해 어떤 부분에서 메모리 누수가 발생하는지 확인하고자 하면,
Shallow Size에 비해 Retained Size가 과도하게 큰 부분을 체크하여 Constructor에 있는 객체를 하나씩 열어보며 의심되는 부분을 찾아가야 합니다.

 

 

3. Performance 탭의 Memory => 가장 직관적

저는 이 방법이 가장 직관적이라고 생각해 추천합니다!

 

Performance 탭에서 Memory 체크박스를 체크한 후 Record 버튼을 누르고 의심가는 동작을 실행한 뒤 멈춥니다.

 

그러면 위와 같은 그래프를 확인할 수 있습니다.

메모리 누수가 발생하지 않는 경우 위와 같이 JS Heap 그래프가 계단식으로 상승하다가 하강하는 모습을 보여줍니다.

 

만약 그래프가 위와 같이 계단식으로 상승하기만 하는 경우 이 동작이 메모리 누수를 발생한다고 의심할 수 있습니다.

 

 

 

저는 이렇게 의심가는 부분을 찾았는데, 해당 함수는 vue에서 동적 바인딩인 :ref에 할당한 함수였습니다.

이 함수가 동작해지 않아도 되는 상황에서 동작하며 메모리 누수가 발생했고,

flag를 통해 동작이 필요한 상황에서 동작하도록 수정해 메모리 누수를 해결했습니다.

---

Resources

https://leetrue.hashnode.dev/memory-leak-chrome

메모리 누수를 확인하며 녹여버린 나의 주말을 돌아보며

https://ui.toast.com/posts/ko_20210611

당신이 모르는 자바스크립트의 메모리 누수의 비밀

https://blog.eunsukim.me/posts/debugging-javascript-memory-leak-with-chrome-devtools

Chrome DevTools로 JS 메모리 누수(Memory Leak) 디버깅하기