메모리 사용 데이터 분석(JavaScript)
이 항목에서는 JavaScript 메모리 분석기에 대해 설명합니다.이 도구는 Visual Studio 2012 Update 1에서 JavaScript로 빌드하는 Windows 스토어 앱에 사용 가능합니다.도구 사용 방법을 보여 주는 자습서는 자습서: 메모리 누수 찾기(JavaScript)을 참조하십시오.
메모리 사용 데이터 보기
Visual Studio에 작업 중인 Windows 스토어 앱이 열려 있는 경우 JavaScript 메모리 분석기를 사용할 수 있습니다.
JavaScript 메모리 분석기를 실행하려면
Visual Studio에서 앱을 실행하는 경우 디버그 도구 모음의 디버깅 시작 드롭다운 목록에서 로컬 컴퓨터, 시뮬레이터 또는 원격 컴퓨터를 클릭합니다.
이러한 옵션에 대한 자세한 내용은 Visual Studio에서 Windows 스토어 앱 실행을 참조하세요.
디버그 메뉴에서 JavaScript 메모리 분석을 가리키고 다음 중 하나를 클릭합니다.
시작 프로젝트 시작.현재 시작 프로젝트를 실행하려면 이 옵션을 클릭합니다.원격 컴퓨터에서 앱을 실행 중인 경우 이 옵션을 클릭해야 합니다.
설치된 응용 프로그램 패키지 시작.분석할 설치된 앱을 선택하려면 이 옵션을 클릭합니다.원격 컴퓨터에서 앱을 실행할 때는 이 옵션이 지원되지 않습니다.
소스 코드에 액세스할 수 없을 때 이 옵션을 사용하여 컴퓨터에 설치한 앱의 메모리 사용을 분석할 수 있습니다.사용자가 직접 개발하는 앱을 제외한 모든 앱의 메모리 사용을 분석하려는 경우에도 이 옵션이 유용할 수 있습니다.
실행 중인 앱에 연결.실행 중인 앱 목록에서 앱을 선택하려면 이 옵션을 클릭합니다.원격 컴퓨터에서 앱을 실행할 때는 이 옵션이 지원되지 않습니다.
소스 코드에 액세스할 수 없을 때 이 옵션을 사용하여 컴퓨터에서 실행 중인 앱의 메모리 사용을 분석할 수 있습니다.
메모리 분석기를 시작하면 VsEtwCollector.exe 실행 권한을 요청하는 사용자 계정 컨트롤이 표시될 수 있습니다.예를 클릭합니다.
Alt+Tab을 눌러 Visual Studio로 전환합니다.
진단 허브 탭에 JavaScript 메모리 분석기에 대한 요약 뷰가 표시됩니다.
메모리 사용 뷰
JavaScript 메모리 분석기를 실행하면 다음과 같은 세 가지 메모리 사용 데이터 뷰를 사용할 수 있습니다.
요약 뷰.모든 스냅숏 요약 타일의 모음과 실행 중인 앱에 대한 메모리 사용 그래프를 제공합니다.이 뷰는 진단 허브 탭에 나타납니다.
스냅숏 정보 보기.단일 스냅숏에 대한 메모리 사용 데이터를 자세히 보여 줍니다.
스냅숏 차이 보기.선택한 두 스냅숏 간의 차이 값으로 자세한 메모리 사용 데이터를 보여 줍니다.
요약 뷰
요약 뷰는 모든 스냅숏 요약 타일의 모음과 실행 중인 앱에 대한 메모리 사용 그래프를 제공합니다.이 뷰에서 스냅숏 만들기, 요약 정보 분석, 다른 뷰로 이동 등의 기본적인 작업을 수행할 수 있습니다.
메모리 그래프는 전용 바이트, 기본 메모리 및 JavaScript 힙을 포함하는 앱 프로세스 메모리의 라이브 뷰를 보여 줍니다.그래프의 모양은 다음과 같습니다.
.png "JavaScript 메모리 분석기 메모리 그래프")
메모리 그래프는 프로세스 메모리의 스크롤 가능한 뷰입니다.
앱 코드에 프로필 표시가 추가된 경우 메모리 사용 그래프에 사용자 표시 삼각형이 나타나 해당 코드 섹션에 도달했음을 나타냅니다.자세한 내용은 JavaScript 콘솔 명령을 참조하십시오.
메모리 그래프에 표시되는 일부 메모리는 JavaScript 런타임에서 할당합니다.앱에서 이 메모리 사용을 제어할 수는 없습니다.그래프에 표시된 메모리 사용은 첫 번째 스냅숏을 만들 때 증가하고, 스냅숏을 추가로 만들 때마다 아주 조금씩 증가합니다.
스냅숏 요약 보기
요약 뷰에서 힙 스냅숏 만들기을 클릭하여 앱 메모리 사용의 현재 상태에 대한 스냅숏을 만들 수 있습니다.요약 뷰에도 나타나는 스냅숏 요약 타일은 JavaScript 힙에 대한 정보와 보다 자세한 정보에 대한 링크를 제공합니다.스냅숏을 여러 개 만든 경우 스냅숏에서는 해당 데이터와 이전 스냅숏의 데이터를 비교하여 추가 정보를 제공합니다.
참고
JavaScript 메모리 분석기는 각 스냅숏 전에 강제로 가비지를 수집합니다.이를 통해 실행 간에 결과의 일관성이 높아집니다.
다음 그림은 이전 스냅숏을 만들 때의 스냅숏 예를 보여 줍니다.
.png "스냅숏 요약")
다음은 스냅숏 요약에 표시되는 정보입니다.
스냅숏 제목과 타임스탬프입니다.
힙 크기(왼쪽의 파란색 파란색 텍스트)입니다.이 번호에는 JavaScript 런타임 엔진이 JavaScript 힙에 추가하는 DOM 요소와 개체가 포함됩니다.힙 크기는 스냅숏의 지배자 뷰에 대한 링크입니다.
힙 크기 차이(왼쪽의 빨간색 또는 녹색 텍스트)입니다.이 값은 현재 스냅숏과 이전 스냅숏 간의 힙 크기 차이를 보여 줍니다.메모리 증가가 있으면 값이 빨간색으로 표시되고 그렇지 않으면 녹색으로 표시됩니다.힙 크기가 동일할 경우 값은 차이 없음입니다.첫 번째 스냅숏의 경우 값은 기준(회색 텍스트)입니다.이 값은 스냅숏 차이의 지배자 뷰에 대한 링크입니다.
개체 수(오른쪽의 파란색 텍스트)입니다.이 수는 앱에서 만든 개체만 표시하며 JavaScript 런타임에서 생성된 기본 제공 개체는 필터링합니다.개체 수는 스냅숏 정보의 형식 뷰에 연결됩니다.
개체 수 차이(오른쪽의 빨간색 또는 녹색 텍스트)입니다.이 값은 현재 스냅숏과 이전 스냅숏 간의 개체 수 차이를 보여 줍니다.개체 수 증가가 있으면 값이 빨간색으로 표시되고 그렇지 않으면 녹색으로 표시됩니다.개체 수가 동일할 경우 값은 차이 없음입니다.첫 번째 스냅숏의 경우 값은 기준(회색 텍스트)입니다.이 값은 스냅숏 차이의 형식 뷰에 대한 링크입니다.
스냅숏이 만들어질 당시의 화면 스크린 샷입니다.
팁
스냅숏 요약에서 증가가 없거나 크기/수 차이가 음수인 것으로 표시되지만 숨겨진 메모리 누수가 있을 수 있습니다.새로 만든 개체 수/크기가 삭제한 개체 수/크기보다 적을 경우가 여기에 해당합니다.예를 들어, 가비지 수집의 결과로 이러한 상황이 발생할 수 있습니다.
스냅숏 정보 보기
스냅숏 정보 보기에서 스냅숏별 메모리 사용에 대한 정보를 자세히 볼 수 있습니다.
요약 뷰에서 스냅숏 요약을 클릭하여 스냅숏 정보를 볼 수 있습니다.예를 들어, 스냅숏 요약의 힙 크기 링크는 스냅숏 정보를 엽니다. 여기에는 기본적으로 지배자 뷰가 표시됩니다.
다음 그림은 스냅숏 정보의 형식 뷰를 보여 줍니다.
.png "형식을 보여 주는 스냅숏 정보 뷰")
스냅숏 정보 뷰에서는 다음과 같은 추가 메모리 사용 데이터 뷰를 사용할 수 있습니다.
지배자.힙에 있는 모든 개체를 보존 크기별로 정렬하여 나열합니다.
형식.인스턴스 수와 총 개체 크기를 개체 형식별로 그룹화하여 보여 줍니다.기본적으로 인스턴스 수를 기준으로 정렬됩니다.
루트.루트 개체부터 자식 참조까지의 개체 트리를 보여 줍니다.기본적으로 자식 노드는 보존 크기 열을 기준으로 정렬되며 맨 위에 가장 큰 값이 표시됩니다.
DOM.태그(DOM) 요소와 해당 요소가 보존 크기인 개체를 보여 줍니다.기본적으로 보존 크기를 기준으로 정렬됩니다.
WinRT.JavaScript 앱에서 참조하는 관리되는 Windows 개체와 관리되지 않는 Windows 개체를 보여 줍니다.기본적으로 보존 크기를 기준으로 정렬됩니다.
지배자 뷰와 같은 대부분의 뷰는 비슷한 값 형식을 보여 줍니다.다음과 같은 값이 여기에 포함됩니다.
식별자.개체를 가장 잘 식별하는 이름입니다.예를 들어, HTML 요소에 대해 하나가 사용되는 경우 ID 특성 값을 보여 줍니다.
형식.개체의 형식 이름입니다.
크기.개체의 크기이며 참조 개체의 크기는 포함하지 않습니다.
보존 크기.개체 크기와 다른 부모 개체가 없는 모든 자식 개체의 크기를 더한 합계입니다.이 합계는 개체에서 사용하는 메모리 양이므로 개체를 삭제할 경우 지정된 메모리 양을 가져오게 됩니다.
개수.개체의 인스턴스 수입니다.이 값은 형식 뷰에만 나타납니다.
스냅숏 차이 보기
JavaScript 메모리 분석기의 스냅숏 차이 뷰에서 스냅숏을 이전 스냅숏과 비교할 수 있습니다.
요약 뷰에서는 스냅숏 요약 타일의 오른쪽 위에 있는 드롭다운 목록에서 다른 스냅숏을 클릭하여 스냅숏 차이 정보를 볼 수 있습니다.
스냅숏 차이로 지배자, 형식, 루트, DOM 개체 및 Windows 런타임 개체에 대한 차이 정보를 볼 수 있습니다.
스냅숏 차이는 두 스냅숏 사이의 힙에 추가된 개체를 보여 줍니다.차이 루트 뷰와 참조 그래프에서 연한 회색 텍스트 색은 개체가 이전 스냅숏에 존재했지만 이전에는 없던 자식이 있음을 나타냅니다.
다음 그림은 스냅숏 차이의 지배자 뷰를 보여 줍니다.
.png "Dominators 뷰에서의 스냅숏 차등")
스냅숏 차이 뷰에서 지배자 뷰와 같은 뷰는 스냅숏 정보 보기 뷰에서와 동일합니다.스냅숏 차이 뷰는 다음 추가 정보와 함께 스냅숏 정보 뷰와 동일한 값 형식을 보여 줍니다.
크기 차이.현재 스냅숏과 비교 스냅숏(이전 스냅숏)의 개체 크기 차이이며 참조 개체의 크기는 포함하지 않습니다.
보존 크기 차이.현재 스냅숏과 비교 스냅숏(이전 스냅숏)의 개체가 보존 크기의 차이입니다.보존 크기에는 개체 크기와 다른 부모 개체가 없는 모든 자식 개체의 크기가 포함됩니다.보존 크기는 개체에서 사용하는 메모리 양이므로 개체를 삭제할 경우 지정된 메모리 양을 가져오게 됩니다.
수 차이.현재 스냅숏과 비교 스냅숏의 개체 인스턴스 수 차이입니다.이 값은 형식 뷰에만 나타납니다.
루트 뷰에서 보기
지배자, 형식, DOM 및 WinRT 뷰에서는 특정 개체와 Global 개체의 관계를 볼 수 있습니다.이 기능을 사용하여 Global 개체 트리 전체를 검색하지 않도록 루트 뷰에서 알려진 개체를 쉽게 찾을 수 있습니다.
기능을 사용하려면 지배자, 형식, DOM 또는 WinRT 뷰에서 식별자를 마우스 오른쪽 단추로 클릭하고 루트 뷰에서 보기를 클릭합니다.
데이터 필터링
지배자, 형식, DOM 및 WinRT 뷰에서는 특정 식별자를 검색하여 데이터를 필터링할 수 있습니다.식별자를 검색하려면 식별자 필터 텍스트 상자에 값을 입력하면 됩니다.문자를 입력하기 시작하면 해당 문자를 포함하지 않는 식별자가 필터링됩니다.
뷰마다 자체 필터가 있으므로 필터링된 정보는 다른 뷰로 이어지지 않습니다.
참조 보기
지배자, 형식, DOM 및 WinRT 뷰의 아래쪽 창에는 공유 참조를 보는 데 사용할 수 있는 참조 그래프가 있습니다.위쪽 창에서 개체를 선택하면 해당 개체를 가리키는 참조의 목록이 참조 그래프에 표시됩니다.
일반 도움말에서 동등 개체를 식별하도록 하려면 위쪽 창 오른쪽 위의 설정 드롭다운 목록에서 개체 ID 표시을 클릭합니다.이 옵션을 클릭하면 식별자 목록에서 개체 옆에 개체 ID가 나타납니다.동일한 ID의 개체는 공유 참조입니다.
기본 제공 값 표시
지배자, 형식, DOM 및 WinRT 뷰에서 기본 제공 개체를 표시할 수 있습니다.이러한 뷰에는 기본적으로 앱에서 만드는 개체만 표시됩니다.이는 불필요한 정보를 필터링하고 앱 관련 문제를 격리하는 데 도움이 됩니다.그러나 JavaScript 런타임에서 앱에 대해 생성하는 모든 개체를 보는 것이 유용한 경우도 있습니다.JavaScript 메모리 분석기에서 이러한 개체를 볼 수 있습니다.
이러한 개체를 표시하려면 창 오른쪽 위의 설정 드롭다운 목록에서 기본 제공 항목 표시를 클릭합니다.
진단 세션 파일
진단 스냅숏 요약은 관련 정보 뷰와 함께 .diagsession 파일로 저장됩니다.솔루션 탐색기의 진단 세션 폴더에는 이전 진단 세션이 표시됩니다.솔루션 탐색기에서 이전 세션을 열거나 파일을 제거하거나 파일 이름을 바꿀 수 있습니다.
JavaScript 콘솔 명령
JavaScript 메모리 분석기는 메모리 문제가 발생하는 코드 섹션을 격리하는 데 도움이 되도록 코드에 사용할 수 있는 다음 두 JavaScript 콘솔 명령을 지원합니다.이들 명령을 앱에 추가하고 메모리 분석기 이외의 컨텍스트에서 앱을 실행하면 예외가 throw됩니다. 그러나 사용 전에 명령이 존재하는지 여부를 테스트할 수 있습니다.세션 시작 단계 초기에는 명령이 존재하지 않습니다.
console.takeHeapSnapshot은 JavaScript 메모리 분석기에 나타나는 힙 스냅숏을 만듭니다.
console.profileMark는 요약 뷰에서 메모리 그래프의 타임라인에 나타나는 프로필 표시(사용자 표시 삼각형)를 설정합니다.이 명령은 이벤트 설명을 나타내는 하나의 문자열 인수를 사용하며 메모리 그래프에 도구 설명으로 나타납니다.이 설명은 100자를 초과할 수 없습니다.
다음 코드 예제에서는 안전하게 takeHeapSnapshot을 호출하는 방법을 보여 줍니다.
if (console && console.takeHeapSnapshot) { console.takeHeapSnapshot(); }
다음 코드 예제에서는 안전하게 profileMark을 호출하는 방법을 보여 줍니다.
if (console && console.profileMark) { console.profileMark("Initialized"); }
메모리 문제 식별 팁
이들 팁은 메모리 사용 문제를 진단하는 데 도움이 됩니다.
주요 메모리 문제를 신속하게 식별하려면 스냅숏 차이의 지배자 뷰를 사용합니다.
전체 메모리 계층 구조에서 개체가 참조되는 위치를 식별하려면 루트 뷰에서 보기를 사용합니다.
메모리 문제의 원인을 식별하기 어려울 때는 지배자와 형식 등의 다양한 뷰를 사용하여 관련 개체 및 형식과 같은 공통점을 찾습니다.
문제 격리를 위해 임시로 코드를 수정하는 것이 도움이 될지 검토해 봅니다.예를 들어, 다음을 수행합니다.
메모리 분석기용 JavaScript 콘솔 명령, console.takeSnapshot 및 console.profileMark를 사용합니다.
이러한 명령을 사용하면 힙 스냅숏 만들기을 직접 클릭해서는 격리할 수 없는 문제를 격리할 수 있습니다.
지배자 뷰와 같은 JavaScript 메모리 분석기 뷰에서 쉽게 찾을 수 있는 테스트 개체를 만듭니다.예를 들어, 초대형 개체를 다른 개체에 연결하여 특정 개체나 요소가 가비지 수집되었는지 확인할 수 있습니다.
새 페이지로 이동 후 메모리에 보존되는 개체를 찾습니다. 이러한 개체는 메모리 문제의 일반적인 원인입니다.예를 들어, URL.CreateObjectUrl 함수를 잘못 사용하면 이 문제가 발생할 수 있습니다.