Post on 07-Dec-2014
description
웹페이지����������� ������������������ 메모리����������� ������������������ 분석과����������� ������������������ 관리
ABC����������� ������������������ Talk����������� ������������������ /����������� ������������������ Steve����������� ������������������ Ahn
오늘은,
-����������� ������������������ 메모리����������� ������������������ 분석����������� ������������������ 도구의����������� ������������������ 상세한����������� ������������������ 사용법을����������� ������������������ 파악해서,
-����������� ������������������ 웹페이지의����������� ������������������ 메모리를����������� ������������������ 정확히����������� ������������������ 분석하고,
-����������� ������������������ 안정적인����������� ������������������ 페이지를����������� ������������������ 만들����������� ������������������ 수����������� ������������������ 있도록����������� ������������������ 준비해두자!
목차
-����������� ������������������ 페이지의����������� ������������������ 메모리����������� ������������������ 현황����������� ������������������ 파악
-����������� ������������������ 인터랙션에����������� ������������������ 따른����������� ������������������ 메모리����������� ������������������ 변화����������� ������������������ 분석
-����������� ������������������ 자바스크립트����������� ������������������ 힙����������� ������������������ 프로파일링
-����������� ������������������ 메모리����������� ������������������ 릭����������� ������������������ 패턴����������� ������������������ 파악
-����������� ������������������ 실제����������� ������������������ 서비스에서����������� ������������������ 알아보기
-����������� ������������������ 정리
메모리가����������� ������������������ 뭐가����������� ������������������ 문제인가?
-����������� ������������������ "메모리가����������� ������������������ 부족하여����������� ������������������ 이����������� ������������������ 프로프램을����������� ������������������ 실행할����������� ������������������ 수����������� ������������������ 없습니다"
-����������� ������������������ 인터랙션이����������� ������������������ 느려질����������� ������������������ 수����������� ������������������ 있음����������� ������������������ (잦은����������� ������������������ GC)
-����������� ������������������ 다른����������� ������������������ 탭이나����������� ������������������ 앱에����������� ������������������ 영향을����������� ������������������ 끼칠����������� ������������������ 수����������� ������������������ 있음
현재����������� ������������������ 탭의����������� ������������������ 메모리����������� ������������������ 확인하기
-����������� ������������������ 크롬은����������� ������������������ 멀티����������� ������������������ 프로세스����������� ������������������ 아키텍처를����������� ������������������ 채택
-����������� ������������������ 각����������� ������������������ 탭은����������� ������������������ 하나의����������� ������������������ 프로세스
-����������� ������������������ Activity����������� ������������������ Monitor로는����������� ������������������ 어떤����������� ������������������ 탭이����������� ������������������ 어떤����������� ������������������ 프로세스를
����������� ������������������ ����������� ������������������ 참조하는지����������� ������������������ 알기����������� ������������������ 어려움
데모)����������� ������������������ Activity����������� ������������������ Monitor����������� ������������������ 살펴보기
크롬의����������� ������������������ 태스크����������� ������������������ 매니저
-����������� ������������������ Tools����������� ������������������ >����������� ������������������ Task����������� ������������������ Manager
-����������� ������������������ 각����������� ������������������ 탭의����������� ������������������ 프로세스����������� ������������������ 정보를����������� ������������������ 확인할����������� ������������������ 수����������� ������������������ 있음
-����������� ������������������ 다양한����������� ������������������ 컬럼����������� ������������������ 확인����������� ������������������ 가능
-����������� ������������������ 주로����������� ������������������ Private����������� ������������������ Memory����������� ������������������ 와����������� ������������������ Javascript����������� ������������������ Memory를����������� ������������������ 참고
데모)����������� ������������������ Task����������� ������������������ Manager����������� ������������������ 살펴보기
chrome://memory
-����������� ������������������ Resident:����������� ������������������ 물리적으로����������� ������������������ 할당된����������� ������������������ 메모리.
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 페이지의����������� ������������������ 메모리를����������� ������������������ 판단하는데����������� ������������������ 가장����������� ������������������ 좋은����������� ������������������ 지표.
-����������� ������������������ Shared:����������� ������������������ 물리적,����������� ������������������ 다른����������� ������������������ 프로세스와����������� ������������������ 공유할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 메모리
-����������� ������������������ Private:����������� ������������������ 물리적,����������� ������������������ 다른����������� ������������������ 프로세스와����������� ������������������ 공유할����������� ������������������ 수����������� ������������������ 없는����������� ������������������ 메모리
-����������� ������������������ Virtual:����������� ������������������ 할당된����������� ������������������ 가상����������� ������������������ 메모리
데모)����������� ������������������ chrome://memory����������� ������������������ 페이지����������� ������������������ 살펴보기
자바스크립트����������� ������������������ 메모리
-����������� ������������������ DOM,����������� ������������������ Script����������� ������������������ Cache,����������� ������������������ CSS����������� ������������������ Cache,����������� ������������������ 문자열은����������� ������������������ 렌더러의����������� ������������������ 메모리에,
-����������� ������������������ 자바스크립트����������� ������������������ 객체는����������� ������������������ 힙����������� ������������������ 영역에����������� ������������������ 저장
데모)����������� ������������������ 개발자도구에서����������� ������������������ 캐시를����������� ������������������ 끄고����������� ������������������ Task����������� ������������������ Manager����������� ������������������ 확인하기
메모리����������� ������������������ 타임라인
-����������� ������������������ Developer����������� ������������������ Tools����������� ������������������ >����������� ������������������ Timeline����������� ������������������ >����������� ������������������ Memory
-����������� ������������������ 어떤����������� ������������������ 이벤트에서����������� ������������������ 메모리����������� ������������������ 릭이����������� ������������������ 발생하지����������� ������������������ 파악하기����������� ������������������ 쉬움
-����������� ������������������ 정확히����������� ������������������ 어떤����������� ������������������ 객체에서����������� ������������������ 발생하는지는����������� ������������������ 파악하기����������� ������������������ 어려움
데모)����������� ������������������ 타임라인����������� ������������������ 패널에서����������� ������������������ 액션에����������� ������������������ 따른����������� ������������������ 메모리����������� ������������������ 변화����������� ������������������ 확인하기
메모리����������� ������������������ 타임라인����������� ������������������ 특징
-����������� ������������������ Document,����������� ������������������ DOM����������� ������������������ Node,����������� ������������������ Event����������� ������������������ Listener����������� ������������������ 의����������� ������������������ 개수����������� ������������������ 파악
-����������� ������������������ 강제����������� ������������������ GC����������� ������������������ 수행����������� ������������������ 가능����������� ������������������ (휴지통����������� ������������������ 아이콘)
-����������� ������������������ 페이지����������� ������������������ 이동����������� ������������������ 시에도����������� ������������������ 트래킹����������� ������������������ 가능
데모)����������� ������������������ 타임라인����������� ������������������ 패널����������� ������������������ 자세히����������� ������������������ 살펴보기
자바스크립트����������� ������������������ 가비지����������� ������������������ 컬렉터
-����������� ������������������ 자바스크립트는����������� ������������������ 가비지����������� ������������������ 컬렉팅을����������� ������������������ 지원하는����������� ������������������ 언어
-����������� ������������������ GC가����������� ������������������ 수행될����������� ������������������ 땐����������� ������������������ 스크립트����������� ������������������ 실행과����������� ������������������ 렌더링이����������� ������������������ 중지됨
-����������� ������������������ 강제로����������� ������������������ GC를����������� ������������������ 수행할����������� ������������������ 수����������� ������������������ 없음
데모)����������� ������������������ GC����������� ������������������ 수행����������� ������������������ 시점,����������� ������������������ GC에����������� ������������������ 의한����������� ������������������ 블럭,����������� ������������������ DOM����������� ������������������ and����������� ������������������ GC
힙����������� ������������������ 스냅샷
-����������� ������������������ Developer����������� ������������������ Tools����������� ������������������ >����������� ������������������ Profiles
-����������� ������������������ 각����������� ������������������ 객체에����������� ������������������ 할당된����������� ������������������ 메모리를����������� ������������������ 정확히����������� ������������������ 파악할����������� ������������������ 수����������� ������������������ 있음
-����������� ������������������ 스냅샷을����������� ������������������ 찍기����������� ������������������ 전엔����������� ������������������ 항상����������� ������������������ GC가����������� ������������������ 수행됨
-����������� ������������������ 즉,����������� ������������������ GC����������� ������������������ 대상이����������� ������������������ 아닌����������� ������������������ 객체들만����������� ������������������ 확인����������� ������������������ 가능
-����������� ������������������ 인스턴스����������� ������������������ 이름����������� ������������������ 뒤����������� ������������������ @ID����������� ������������������ 는����������� ������������������ 스냅샷����������� ������������������ 별로����������� ������������������ 고유한����������� ������������������ 아이디
데모)����������� ������������������ 타임라인을����������� ������������������ 켜고����������� ������������������ 힙����������� ������������������ 스냅샷����������� ������������������ 실행하기
메모리����������� ������������������ 관련����������� ������������������ 용어
Shallow����������� ������������������ size:����������� ������������������ 객체에����������� ������������������ 직접����������� ������������������ 할당된����������� ������������������ 크기
Retained����������� ������������������ size
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 현재����������� ������������������ 객체와,����������� ������������������ 현재����������� ������������������ 객체에만����������� ������������������ 참조를����������� ������������������ 갖고����������� ������������������ 있는����������� ������������������ 객체의����������� ������������������ 크기
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 즉,����������� ������������������ 현재����������� ������������������ 객체를����������� ������������������ 삭제했을����������� ������������������ 때����������� ������������������ GC되는����������� ������������������ 크기
Retaining����������� ������������������ Paths
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ GC����������� ������������������ 루트에서����������� ������������������ 접근����������� ������������������ 가능한����������� ������������������ 패스
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 연결되어����������� ������������������ 있지����������� ������������������ 않는����������� ������������������ 객체는����������� ������������������ GC����������� ������������������ 될����������� ������������������ 것임
Dominator
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ GC����������� ������������������ 루트에서����������� ������������������ 최단����������� ������������������ 거리에����������� ������������������ 있는����������� ������������������ 객체
데모)����������� ������������������ Shallow����������� ������������������ size,����������� ������������������ Retained����������� ������������������ size
힙����������� ������������������ 스냅샷의����������� ������������������ 각����������� ������������������ 뷰
Summary����������� ������������������ View
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 생성자����������� ������������������ 이름과����������� ������������������ 인스턴스����������� ������������������ 그룹을����������� ������������������ 보여줌
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 생성자를����������� ������������������ 기준으로����������� ������������������ 그����������� ������������������ 인스턴스가����������� ������������������ 얼마나����������� ������������������ 많이����������� ������������������ 생성되었는지����������� ������������������ 확인할����������� ������������������ 때����������� ������������������ 유용
Comparison����������� ������������������ View
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 두����������� ������������������ 개����������� ������������������ 이상의����������� ������������������ 스냅샷을����������� ������������������ 비교할����������� ������������������ 때����������� ������������������ 유용
Containment����������� ������������������ View
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 전체적인����������� ������������������ 구조를����������� ������������������ 보기����������� ������������������ 위한����������� ������������������ 뷰
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 로우����������� ������������������ 레벨에서����������� ������������������ 앱에����������� ������������������ 얼마나����������� ������������������ 많은����������� ������������������ 메모리를����������� ������������������ 사용하고����������� ������������������ 있는지����������� ������������������ 확인할����������� ������������������ 때����������� ������������������ 유용
Dominators����������� ������������������ View
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 힙����������� ������������������ 그래프에서의����������� ������������������ Dominator를����������� ������������������ 보여줌
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 메모리����������� ������������������ 누적����������� ������������������ 포인트를����������� ������������������ 빠르기����������� ������������������ 찾기에����������� ������������������ 적합함
데모)����������� ������������������ 프로파일����������� ������������������ 패널����������� ������������������ 자세히����������� ������������������ 살펴보기
힙����������� ������������������ 스냅샷����������� ������������������ 팁
-����������� ������������������ 노란색����������� ������������������ 하이라이트:
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 자바스크립트에서����������� ������������������ 직접����������� ������������������ 접근이����������� ������������������ 가능한����������� ������������������ 걸����������� ������������������ 의미
-����������� ������������������ 빨간색����������� ������������������ 하이라이트:
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 직접����������� ������������������ 접근할����������� ������������������ 수����������� ������������������ 없는����������� ������������������ Detached����������� ������������������ DOM����������� ������������������ (클로저나����������� ������������������ 변수에����������� ������������������ 할당)
-����������� ������������������ 힙����������� ������������������ 스냅샷에서����������� ������������������ 선택한����������� ������������������ 요소는����������� ������������������ 콘솔에서����������� ������������������ $0으로����������� ������������������ 접근����������� ������������������ 가능
-����������� ������������������ 익명함수에����������� ������������������ 이름을����������� ������������������ 달아두면����������� ������������������ 디버깅이����������� ������������������ 용이함
3����������� ������������������ 스냅샷����������� ������������������ 테크닉
메모리����������� ������������������ 릭이����������� ������������������ 발생하는����������� ������������������ 시나리오를����������� ������������������ 가정하고,����������� ������������������ 힙����������� ������������������ 스냅샷으로����������� ������������������ 원인을����������� ������������������ 찾아내는����������� ������������������ 방법
1.����������� ������������������ 먼저����������� ������������������ 힙����������� ������������������ 스냅샷을����������� ������������������ 찍는다.����������� ������������������ (Snapshot����������� ������������������ 1)
2.����������� ������������������ 메모리����������� ������������������ 릭이����������� ������������������ 발생할����������� ������������������ 것����������� ������������������ 같은����������� ������������������ 액션을����������� ������������������ 수행한다.
3.����������� ������������������ 다시����������� ������������������ 힙����������� ������������������ 스냅샷을����������� ������������������ 찍는다.����������� ������������������ (Snapshot����������� ������������������ 2)
4.����������� ������������������ 메모리����������� ������������������ 릭이����������� ������������������ 발생할����������� ������������������ 것����������� ������������������ 같은����������� ������������������ 액션을����������� ������������������ 다시����������� ������������������ 수행한다.
5.����������� ������������������ 다시����������� ������������������ 힙����������� ������������������ 스냅샷을����������� ������������������ 찍는다.����������� ������������������ (Snapshot����������� ������������������ 3)
6.����������� ������������������ Snapshot����������� ������������������ 3를����������� ������������������ 선택한����������� ������������������ 후,����������� ������������������ Snapshot����������� ������������������ 1과����������� ������������������ Snapshot����������� ������������������ 2����������� ������������������ 사이에서����������� ������������������ 발생한����������� ������������������ 값을����������� ������������������ 조회한다.
(2와����������� ������������������ 4가����������� ������������������ 꼭����������� ������������������ 동일한����������� ������������������ 액션이����������� ������������������ 아니어도����������� ������������������ 괜찮다)
데모)����������� ������������������ 3����������� ������������������ 스냅샷����������� ������������������ 테크닉
힙����������� ������������������ 할당����������� ������������������ 타임라인
-����������� ������������������ Profiles����������� ������������������ >����������� ������������������ Record����������� ������������������ Heap����������� ������������������ Allocations
-����������� ������������������ 50ms����������� ������������������ 단위로����������� ������������������ 힙����������� ������������������ 스냅샷을����������� ������������������ 찍음
-����������� ������������������ 힙����������� ������������������ 할당����������� ������������������ 여부를����������� ������������������ 실시간으로����������� ������������������ 판단할����������� ������������������ 수����������� ������������������ 있음
-����������� ������������������ 파란색����������� ������������������ 막대:����������� ������������������ 계속����������� ������������������ 할당되어����������� ������������������ 있음
-����������� ������������������ 회색����������� ������������������ 막대:����������� ������������������ GC됨
데모)����������� ������������������ 배열과����������� ������������������ 메모리����������� ������������������ 할당
개발할����������� ������������������ 때����������� ������������������ 신경써야����������� ������������������ 하나?
-����������� ������������������ 개발할����������� ������������������ 때����������� ������������������ 메모리����������� ������������������ 문제를����������� ������������������ 고려해야����������� ������������������ 하나?
-����������� ������������������ 대부분은����������� ������������������ 걱정하지����������� ������������������ 않아도����������� ������������������ 됨
-����������� ������������������ 메모리����������� ������������������ 릭이����������� ������������������ 실제로����������� ������������������ 사용자에게����������� ������������������ 영향을����������� ������������������ 끼치는����������� ������������������ 환경은
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 꽤나����������� ������������������ 특별하기����������� ������������������ 때문
-����������� ������������������ 브라우저나����������� ������������������ 프레임워크가����������� ������������������ 어느����������� ������������������ 정도����������� ������������������ 해결해주기도����������� ������������������ 함
메모리����������� ������������������ 릭을����������� ������������������ 고려해야����������� ������������������ 하는����������� ������������������ 상황
-����������� ������������������ 대용량의����������� ������������������ 자바스크립트를����������� ������������������ 사용하는����������� ������������������ 리치����������� ������������������ 애플리케이션인가?
-����������� ������������������ IE6/IE7����������� ������������������ 등을����������� ������������������ 지원하고,����������� ������������������ 대용량의����������� ������������������ 자바스크립트를����������� ������������������ 사용하는가?
-����������� ������������������ 메모리에����������� ������������������ 제한이����������� ������������������ 있는����������� ������������������ 모바일����������� ������������������ 환경을����������� ������������������ 지원해야����������� ������������������ 하는가?
어느����������� ������������������ 정도의����������� ������������������ 리치?
-����������� ������������������ 오랜����������� ������������������ 시간동안����������� ������������������ 타이머를����������� ������������������ 반복하는����������� ������������������ 경우
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (예:����������� ������������������ 게임)
-����������� ������������������ 사용자가����������� ������������������ 페이지에����������� ������������������ 오래����������� ������������������ 머무르면서����������� ������������������ 인터랙션을����������� ������������������ 하는����������� ������������������ 경우
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (예:����������� ������������������ 웹메일)
-����������� ������������������ 많은����������� ������������������ 양의����������� ������������������ DOM을����������� ������������������ 쓰고����������� ������������������ 지우는����������� ������������������ 것을����������� ������������������ 반복하는����������� ������������������ 경우
메모리����������� ������������������ 릭이����������� ������������������ 발생하는����������� ������������������ 주요����������� ������������������ 원인
-����������� ������������������ 클로저에서����������� ������������������ 사용하지����������� ������������������ 않는����������� ������������������ 변수����������� ������������������ 참조
-����������� ������������������ DOM과����������� ������������������ 이벤트����������� ������������������ 리스너의����������� ������������������ 순환����������� ������������������ 참조
-����������� ������������������ DOM����������� ������������������ 개수만큼����������� ������������������ 늘어나는����������� ������������������ 이벤트����������� ������������������ 핸들러
-����������� ������������������ DOM을����������� ������������������ 삭제해도����������� ������������������ 남아있는����������� ������������������ 이벤트����������� ������������������ 핸들러
-����������� ������������������ 무한정����������� ������������������ 늘어나는����������� ������������������ 캐시
클로저에서����������� ������������������ 사용하지����������� ������������������ 않는����������� ������������������ 변수����������� ������������������ 참조
-����������� ������������������ 클로저에서����������� ������������������ 컨텍스트로����������� ������������������ 부모����������� ������������������ 함수의����������� ������������������ 변수를����������� ������������������ 참조
-����������� ������������������ 최근의����������� ������������������ V8에서는����������� ������������������ 간단한����������� ������������������ 경우����������� ������������������ 정상적으로����������� ������������������ GC함
-����������� ������������������ 부모����������� ������������������ 함수가����������� ������������������ 여러����������� ������������������ 개인����������� ������������������ 경우����������� ������������������ 메모리����������� ������������������ 릭����������� ������������������ 발생
-����������� ������������������ 사용하지����������� ������������������ 않는����������� ������������������ 변수는����������� ������������������ null����������� ������������������ 처리하는����������� ������������������ 것으로����������� ������������������ 해결����������� ������������������ 가능
데모)����������� ������������������ 클로저와����������� ������������������ 메모리,����������� ������������������ 클로저에����������� ������������������ 의한����������� ������������������ 메모리����������� ������������������ 릭
DOM과����������� ������������������ 이벤트����������� ������������������ 핸들러의����������� ������������������ 순환����������� ������������������ 참조
-����������� ������������������ 이벤트����������� ������������������ 핸들러에서����������� ������������������ DOM을����������� ������������������ 순환����������� ������������������ 참조해서����������� ������������������ 발생하는����������� ������������������ 문제
-����������� ������������������ IE6/7����������� ������������������ 등����������� ������������������ 구형����������� ������������������ 브라우저에서����������� ������������������ 발생
-����������� ������������������ 모던����������� ������������������ 브라우저에서도����������� ������������������ 발생하던����������� ������������������ 문제였으나,
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 현재����������� ������������������ V8에서는����������� ������������������ 정상적으로����������� ������������������ GC함
데모)����������� ������������������ DOM과����������� ������������������ 이벤트����������� ������������������ 핸들러의����������� ������������������ 순환����������� ������������������ 참조
DOM����������� ������������������ 개수만큼����������� ������������������ 늘어나는����������� ������������������ 이벤트����������� ������������������ 핸들러
-����������� ������������������ 추가하는����������� ������������������ 각����������� ������������������ DOM에����������� ������������������ 모두����������� ������������������ 이벤트����������� ������������������ 핸들러를����������� ������������������ 붙여서����������� ������������������ 발생하는����������� ������������������ 문제
-����������� ������������������ 이벤트����������� ������������������ 버블링을����������� ������������������ 활용해����������� ������������������ 해결����������� ������������������ 가능����������� ������������������ (Event����������� ������������������ Delegation)
데모)����������� ������������������ DOM����������� ������������������ 개수만큼����������� ������������������ 늘어나는����������� ������������������ 이벤트����������� ������������������ 핸들러
DOM을����������� ������������������ 삭제해도����������� ������������������ 남아있는����������� ������������������ 이벤트����������� ������������������ 핸들러
-����������� ������������������ DOM과����������� ������������������ 이벤트����������� ������������������ 핸들러를����������� ������������������ 별도로����������� ������������������ 관리하는����������� ������������������ 경우
-����������� ������������������ DOM을����������� ������������������ 삭제할����������� ������������������ 때����������� ������������������ 이벤트����������� ������������������ 핸들러를����������� ������������������ 삭제하지����������� ������������������ 않는����������� ������������������ 것이����������� ������������������ 문제
-����������� ������������������ DOM을����������� ������������������ 삭제할����������� ������������������ 때����������� ������������������ 등록된����������� ������������������ 이벤트����������� ������������������ 핸들러도����������� ������������������ 삭제해����������� ������������������ 해결
-����������� ������������������ 대부분의����������� ������������������ 라이브러리에서����������� ������������������ 처리해줌
데모)����������� ������������������ 삭제되지����������� ������������������ 않는����������� ������������������ 이벤트����������� ������������������ 핸들러
무한정����������� ������������������ 늘어나는����������� ������������������ 캐시
-����������� ������������������ 메모리����������� ������������������ 증가를����������� ������������������ 컨트롤하지����������� ������������������ 않아����������� ������������������ 발생하는����������� ������������������ 문제
-����������� ������������������ 가능하다면����������� ������������������ 풀����������� ������������������ 형태로����������� ������������������ 사용하도록����������� ������������������ 구현
데모)����������� ������������������ 무한정����������� ������������������ 늘어나는����������� ������������������ 캐시
서비스����������� ������������������ 현황����������� ������������������ 파악하기
1.����������� ������������������ 얼마나����������� ������������������ 많은����������� ������������������ 메모리를����������� ������������������ 사용하고����������� ������������������ 있나?
2.����������� ������������������ 메모리����������� ������������������ 누수가����������� ������������������ 발생하고����������� ������������������ 있진����������� ������������������ 않나?
3.����������� ������������������ 얼마나����������� ������������������ 자주����������� ������������������ GC가����������� ������������������ 일어나고����������� ������������������ 있나?
문제����������� ������������������ 해결하기
-����������� ������������������ 메모리����������� ������������������ 릭이����������� ������������������ 발생하는����������� ������������������ 시나리오를����������� ������������������ 가정
-����������� ������������������ 어떤����������� ������������������ 액션인가?
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 메모리����������� ������������������ 타임라인,����������� ������������������ 힙����������� ������������������ 할당����������� ������������������ 타임라인에서����������� ������������������ 확인
-����������� ������������������ 어떤����������� ������������������ 객체인가?
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 힙����������� ������������������ 스냅샷����������� ������������������ (3����������� ������������������ 스냅샷����������� ������������������ 테크닉����������� ������������������ 활용)
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ 힙����������� ������������������ 할당����������� ������������������ 타임라인에서����������� ������������������ 확인
실제����������� ������������������ 서비스에서����������� ������������������ 확인하기
데모����������� ������������������ 타임~
정리
-����������� ������������������ 대부분은����������� ������������������ 크게����������� ������������������ 고민하지����������� ������������������ 않아도����������� ������������������ 된다.
-����������� ������������������ V8의����������� ������������������ 가비지����������� ������������������ 컬렉터는����������� ������������������ 충분히����������� ������������������ 최적화되어����������� ������������������ 있다.
-����������� ������������������ 하지만,����������� ������������������ 현황을����������� ������������������ 파악하고,
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 문제가����������� ������������������ 발생했을����������� ������������������ 때����������� ������������������ 대응할����������� ������������������ 준비는����������� ������������������ 되어����������� ������������������ 있어야����������� ������������������ 한다.
Demo
http://ohgyun.github.io/javascript-memory-profiling/index.html
References����������� ������������������ (1/3)
크롬의����������� ������������������ 멀티����������� ������������������ 프로세스����������� ������������������ 아키텍처
http://blog.chromium.org/2008/09/multi-process-architecture.html
개발자����������� ������������������ 도구����������� ������������������ >����������� ������������������ 타임라인����������� ������������������ 패널
https://developers.google.com/chrome-developer-tools/docs/timeline
개발자����������� ������������������ 도구����������� ������������������ >����������� ������������������ 프로파일����������� ������������������ 패널
https://developers.google.com/chrome-developer-tools/docs/heap-profiling
메모리����������� ������������������ 관련����������� ������������������ 용어����������� ������������������ 기본
https://developers.google.com/chrome-developer-tools/docs/memory-analysis-101
3����������� ������������������ 스냅샷����������� ������������������ 테크닉
https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#three-snapshot-technique
References����������� ������������������ (2/3)
지메일의����������� ������������������ 메모리����������� ������������������ 관리
http://www.html5rocks.com/en/tutorials/memory/effectivemanagement/
지메일����������� ������������������ 메모리����������� ������������������ 개선����������� ������������������ 슬라이드
https://docs.google.com/presentation/d/1wUVmf78gG-ra5aOxvTfYdiLkdGaR9OhXRnOlIcEmu2s/pub
메모리����������� ������������������ 관리,����������� ������������������ 가비지����������� ������������������ 컬렉터����������� ������������������ 친화적인����������� ������������������ 코드����������� ������������������ 만들기
http://buildnewgames.com/garbage-collector-friendly-code/
크롬����������� ������������������ 개발자����������� ������������������ 도구의����������� ������������������ 메모리����������� ������������������ 타임라인과����������� ������������������ 힙����������� ������������������ 프로파일링에����������� ������������������ 대한����������� ������������������ 포스트
http://zetafleet.com/blog/google-chromes-heap-profiler-and-memory-timeline
자바스크립트����������� ������������������ 메모리����������� ������������������ 릭����������� ������������������ 패턴
http://www.ibm.com/developerworks/web/library/wa-memleak/
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (이����������� ������������������ 포스트의����������� ������������������ 이슈����������� ������������������ 중����������� ������������������ 대부분은����������� ������������������ V8����������� ������������������ 가비지����������� ������������������ 컬렉터에서����������� ������������������ 해결한����������� ������������������ 상태이다)
References����������� ������������������ (3/3)
V8����������� ������������������ 엔진의����������� ������������������ 가비지����������� ������������������ 컬렉터
https://developers.google.com/v8/embed#handles
모던����������� ������������������ 브라우저에서도����������� ������������������ 메모리����������� ������������������ 릭����������� ������������������ 걱정을����������� ������������������ 해야하나?
http://stackoverflow.com/questions/7381201/javascript-should-i-worry-about-memory-leaks-in-2011
자바의����������� ������������������ 가비지����������� ������������������ 컬렉팅����������� ������������������ 과정
http://helloworld.naver.com/helloworld/1329