본문으로 건너뛰기

Heap snapshot 실습

카드를 화면에서 지운 뒤에도 관련 객체가 메모리에 남는지 확인해 보세요. Console에 코드를 붙여넣을 필요는 없습니다.

실습 코드를 불러오는 중입니다.

카드를 만든 뒤 화면에서 제거하세요. DevTools의 Memory → Heap snapshot을 찍고, Summary의 Class filter에서 StudyUser가 남아 있는지 확인하세요. Retainers로 그 이유를 찾은 뒤 Map 항목을 삭제하고 새 스냅샷을 찍어 비교합니다.

실행되는 코드 보기
window.demoCache = new Map();

function StudyUser(name) {
  this.name = name;
}

// 카드 만들기: demoCache.set(1, new StudyUser('민수'));
// 화면에서 카드 제거: 화면 표시만 변경
// Map 항목 삭제: demoCache.delete(1);