JavaScript Memory Profiling

35
웹페이지 메모리 분석과 관리 ABC Talk / Steve Ahn

description

ABC Talk #10 웹페이지 메모리 분석과 관리 (자바스크립트 메모리 프로파일링) https://github.com/ohgyun/javascript-memory-profiling

Transcript of JavaScript Memory Profiling

웹페이지����������� ������������������  메모리����������� ������������������  분석과����������� ������������������  관리

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의����������� ������������������  가비지����������� ������������������  컬렉터는����������� ������������������  충분히����������� ������������������  최적화되어����������� ������������������  있다.

-����������� ������������������  하지만,����������� ������������������  현황을����������� ������������������  파악하고,

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  문제가����������� ������������������  발생했을����������� ������������������  때����������� ������������������  대응할����������� ������������������  준비는����������� ������������������  되어����������� ������������������  있어야����������� ������������������  한다.

감사합니다.

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