티스토리 뷰


발생일: 2013.09.12

키워드: 자바스크립트 메모리 프로파일링, 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




반응형
댓글
공지사항