티스토리 뷰
키워드: 자바스크립트 메모리 프로파일링, JavaScript Memory Profiling, Web Page Memory Analysis, 웹 페이지 메모리 분석, node-inspector, node.js memory profiling, 노드 메모리 프로파일링
문제:
열 번째 ABC Talk에서 발표한 주제.
해결책:
아래 링크에서 데모를 확인할 수 있다.
https://github.com/ohgyun/javascript-memory-profiling
2017.02.01 추가
- node.js 인 경우, node-inspector 를 사용하면 된다.
- 3 Snapshot Technic은 역시 유용하다.
- https://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/
- 이벤트 핸들러에 이름을 명시한 경우 (function ABC() 처럼) Heap Snapshot 에서도 이름으로 볼 수 있다.
- 이름이 있든 없든, 뷰에서 마우스 오버하면 해당 코드로 바로 이동할 수 있다. 굉장히 요긴하다.
2017.09.22 추가
- Shallow Size와 Retained Size의 개념은 자꾸 헷갈린다.
- Shallow Size는 객체 자체가 보유한 크기
- 주로 배열과 문자열의 shallow size가 크다
- Retained Size는 객체가 삭제될 때 함께 GC되는 크기이다.
- 즉, 객체가 단독으로 참조하고 있는 객체의 크기라고 생각하면 된다.
- 예를 들어, 아래 코드를 실행했다면,
xxx = ['aaaaa', 'bbbbb', 'ccccc', 'ddddd', 'eeeee']
xxx와 각 문자열은 아래 크기를 갖는다.
- xxx 는,
- Shallow Size: 32byte (32byte는 배열 기본 크기)
- Retained Size: 132byte
= 배열의 Shallow Size 32byte + 배열이 포함한 문자열(기본 크기 4byte * 5글자 * 5개 문자열)의 크기 100byte
- 각 문자열은,
- 'aaaaa': Shallow Size 20byte, Retained Size 20byte
- 참고로, 힙 스냅샷에서 문자열은 모두 최대값인 4byte로 표시되는 것 같다
- 자세한 건 아래 문서에 잘 정리되어 있다.
https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101
- 각 스냅샷 간의 차이는 3 snapshot 테크닉도 좋지만,
Comparison View에서 #New, #Deleted, #Delta 속성을 참고해보는 게 더 편하더라.
- 각 뷰의 차이와 활용하는 방법은 아래 문서에 잘 설명되어 있다. 데모도 엄청 잘 되어 있으니 참고해보자.
https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots
아래 슬라이드, 설명 엄청 잘했다. 짱이다!
http://slides.com/gruizdevilla/memory