가비지 컬렉터는 메모리 누수를 해결한다고 하는데, 그렇다면 메모리 누수란 무엇일까?

Javascript에서의 메모리 누수

시간이 지남에 따라 애플리케이션에서 사용하는 메모리 양이 의도치않게 증가하거나
더 이상 필요없는 메모리를 계속 점유하고 있는 현상을 말한다.

객체가 필요하지 않지만 여전히 참조되고 있어 가비지 컬렉터가 수집하지 못해 유지되거나 쌓이게 되는데

이러한 경우로는 DOM 요소나 팝업창처럼 자체 수명 주기가 있어 더 이상 사용하지 않아도 객체 자체는 여전히 존재해 이러한 객체를 참조할 때 메모리 누수가 발생한다.

<button id="show">Show Notes</button>
<button id="hide">Hide Notes</button>
<script type="module">
  let notesWindow;
  document.getElementById('show').onclick = () => {
    notesWindow = window.open('/presenter-notes.html');
  };
  document.getElementById('hide').onclick = () => {
    if (notesWindow) notesWindow.close();
    // 창을 닫아도 notesWindow는 여전히 액세스 가능한 변수를 보유하고 있다.
  };
</script>

이러한 예시를 분리된 창(detached window) 이라고 한다.

분리된 창에서 메모리 누수가 일어나는 과정

새로 열린 브라우저를 닫아도 열었던 핸들러에서 바인딩 되어있기 때문에 가비지 컬렉팅 할 수 없다.

이벤트 핸들러를 통해 iframe에 대한 참조가 발생한 경우 페이지를 닫아도 참조가 유지되는 경우
새 창이나 iframe에 로드된 메모리가 많아 메모리에 유지되는 경우
JavaScript 객체를 다른 창이나 iframe으로 전달할때 프로토타입 체인에 객체가 생성된 환경에 대한 참조가 생성되어 다른 창에서 객체에 대한 참조를 보유하게 되는 경우

분리된 창에서 메모리 누수 방지하기

분리된 창에서 메모리 누수가 발생하는 경우를 방지하는 방법에 대해 알아보자

팝업 닫기

참조가 유지되고 있는 변수에 null 값으로 재할당해 참조를 제거할 수 있다.

let popup;
 
open.onclick = () => {
  popup = window.open('/login.html');
};
 
close.onclick = () => {
  popup.close(); // 팝업을 닫은 후
  popup = null;  // null을 재할당해서 참조를 제거한다.
};

하지만 이 경우 페이지를 이동하거나 팝업을 닫지 않으면 여전히 메모리 누수가 발생하게 된다.

모니터링 및 폐기

사용자가 팝업을 닫거나 새 문서로 이동하는 경우 브라우저는 pagehide 이벤트를 발생시켜 문서가 언로드 되고 있음을 알려준다.

pagehide 이벤트는 새 창과 프레임을 만든 직후 초기 페이지 숨기기 이벤트가 일어나기 때문에 첫번째 이벤트를 무시해야한다. 이를 위한 여러 방법이 있다.

let popup;
 
open.onclick = () => {
  popup = window.open('/login.html');
 
  popup.addEventListener('pagehide', () => {
    if (!popup.location.host) return; // 초기 문서의 about:blank url을 감지해 무시
 
    popup = null; // 참조 제거
  });
};

WeakRef 사용

WeakRef는 가비지 컬렉션을 수행할 수 있는 객체 참조 방법으로 가비지 수집되지 않은 객체에 대한 참조를 반환하는 .deref() 메서드를 제공하는 객체이다.

<button id="open">Open Popup</button>
<button id="close">Close Popup</button>
<script>
  let popup;
  
  open.onclick = () => {
    popup = new WeakRef(window.open('/login.html'));
  };
  
  close.onclick = () => {
    const win = popup.deref();
    if (win) win.close();
  };
</script>

postMessage를 통한 통신

직접 연결해 참조를 남기는 것을 방지하기 위해 postMessage()로 문서간 통신을 제한한다.

let updateNotes;
 
function showNotes() {
  let win = window.open('/presenter-view.html');
  
  win.addEventListener('pagehide', () => {
    if (!win || !win.location.host) return;
    win = null;
  });
  
  updateNotes = (data) => {
    if (!win) return;
    win.postMessage(data, location.origin);
  };
  
  addEventListener('message', (event) => {
    if (event.source !== win) return;
    if (event.data[0] === 'nextSlide') nextSlide();
  });
}
 
let slide = 1;
 
function nextSlide() {
  slide += 1;
 
  if (updateNotes) {
    updateNotes(['setSlide', slide]);
  }
}
 
document.body.onclick = nextSlide;

noopener로 참조 피하기

새로운 창이나 프레임에 대한 참조를 얻지 않는 nooper 옵션을 통해 참조를 피한다.

window.open('https://example.com/share', null, 'noopener');