자습서: 메모리 누수 찾기(JavaScript)
이 항목에서는 JavaScript 메모리 분석기를 사용하여 간단한 메모리 문제를 식별하고 수정하는 과정을 안내합니다.이 자습서에서는 큰 데이터 배열을 생성하는 응용 프로그램을 만듭니다.새 페이지로 이동할 때 응용 프로그램에서 데이터를 삭제할 것입니다.
참고
의 에 대해 JavaScript 메모리 분석기를 사용할 수 있습니다.
JavaScript 메모리 분석기 테스트 응용 프로그램 실행
Visual Studio에서 파일 > 새로 만들기 > 프로젝트를 클릭합니다.
왼쪽 창에서 JavaScript를 클릭하고 가운데 창에서 탐색 응용 프로그램을 클릭합니다.
이름 상자에 JS_Mem_Tester와 같은 이름을 입력하고 확인을 클릭합니다.
솔루션 탐색기에서 pages\home 폴더에 있는 home.html을 열고 <body> 태그 사이에 이 코드를 붙여 넣습니다.
<div class="fragment homepage"> <header aria-label="Header content" role="banner"> <button class="win-backbutton" aria-label="Back" disabled type="button"></button> <h1 class="titlearea win-type-ellipsis"> <span class="pagetitle">Welcome to JSMemTester!</span> </h1> </header> <section aria-label="Main content" role="main"> <p>Start generating data...</p> <button class="startButton" title="start" >Start</button> <p class="statusMsg1">""</p> <p>Navigate to page... (reload)</p> <button class="navButton" title="navigate" >Navigate</button> </section> </div>home.js를 열고 모든 코드를 이 코드로 바꿉니다.
(function () { "use strict"; var data; WinJS.UI.Pages.define("/pages/home/home.html", { // This function is called whenever a user navigates to this page. It // populates the page elements with the app's data. ready: function (element, options) { // TODO: Initialize the page here. var firstElem = document.querySelector('.startButton'); firstElem.addEventListener('click', sButtonClicked.bind(this)); var secondElem = document.querySelector('.navButton'); secondElem.addEventListener('click', nButtonClicked.bind(this)); }, generateData: function () { data = {}; var x = 0; var newData = "1"; for (var i = 0; i < 300; i++) { data[i] = "data" + newData; newData = newData + (100 * set[x]).toString(); if (i == 100) { x = 1; } if (i == 200) { x = 2; } } } }); function sButtonClicked(args) { this.generateData(); var elem = document.querySelector('.statusMsg1'); elem.textContent = "Done generating data (string array)."; } function nButtonClicked(args) { WinJS.Navigation.navigate('/pages/home/home.html'); } // Adding arbitrary values to sample data. var mod1 = 10; var mod2 = 100; var mod3 = 1000; var set = [mod1, mod2, mod3 ]; })();F5 키를 눌러 디버깅을 시작합니다.이 페이지가 나타나는지 확인합니다.
.png "테스트 응용 프로그램의 시작 화면")
Alt+Tab을 눌러 Visual Studio로 다시 전환하고 Shift+F5를 눌러 디버깅을 중지합니다.
응용 프로그램 작동을 확인했으므로 메모리 사용을 검사할 수 있습니다.
메모리 사용 분석
디버그 도구 모음의 디버깅 시작 드롭다운 목록에서 시뮬레이터를 클릭합니다.
이 목록에서 로컬 컴퓨터 또는 원격 컴퓨터를 클릭할 수도 있습니다.그러나 시뮬레이터를 사용하는 경우 실행 중인 응용 프로그램과 JavaScript 메모리 분석기 사이를 쉽게 전환할 수 있도록 Visual Studio 옆에 시뮬레이터를 배치할 수 있습니다.자세한 내용은 Visual Studio에서 Windows 스토어 앱 실행 및 원격 컴퓨터에서 Windows 스토어 앱 실행을 참조하십시오.
디버그 메뉴에서 JavaScript 메모리 분석을 가리키고 시작 프로젝트 시작을 클릭합니다.
이 자습서에서는 시작 프로젝트에 메모리 분석기를 연결합니다.설치된 응용 프로그램에 메모리 분석기 연결 등의 기타 옵션에 대한 자세한 내용은 메모리 사용 데이터 분석(JavaScript)을 참조하십시오.
메모리 분석기를 시작하면 VsEtwCollector.exe 실행 권한을 요청하는 사용자 계정 컨트롤이 표시될 수 있습니다.예를 클릭합니다.
Alt+Tab을 눌러 실행 중인 응용 프로그램에서 Visual Studio로 전환합니다.
The JavaScript 메모리 분석기의 진단 허브 탭에 정보가 표시됩니다.
이 요약 뷰의 메모리 그래프는 시간별 프로세스 메모리 사용을 보여 줍니다.뷰에서는 힙 스냅숏 만들기과 같은 명령도 제공합니다.스냅숏은 특정 시간의 메모리 사용에 대한 자세한 정보를 제공합니다.자세한 내용은 메모리 사용 데이터 분석(JavaScript)을 참조하십시오.
힙 스냅숏 만들기을 클릭합니다.
응용 프로그램으로 전환하고 시작 단추를 클릭합니다.
시작 단추를 누르면 home.js의 코드에서 큰 배열을 생성합니다.이 배열을 진단 용도로 사용하겠습니다.
Visual Studio로 전환하고 힙 스냅숏 만들기을 다시 클릭합니다.
다음 그림에는 요약 뷰의 아래쪽 창에 두 개의 스냅숏이 표시되어 있습니다.
.png "스냅숏 요약")
이들 스냅숏을 비교할 수 있습니다.스냅숏 #2는 다음을 보여 줍니다.
힙 크기(왼쪽의 파란색 텍스트)가 1MB 이상으로 크게 증가했습니다.
이전 스냅숏 이후 스냅숏 크기의 차이(왼쪽의 빨간색 텍스트)가 400KB 이상입니다.
힙의 개체 수(오른쪽의 파란색 텍스트)가 3,900개 이상으로 수백 개 증가했습니다.
이전 스냅숏 이후 힙의 개체 수 차이(오른쪽의 빨간색 텍스트)가 300개 이상입니다.
스냅숏 #2에서 +404KB와 같은 차이 값을 보여 주는 왼쪽의 빨간색 테스트를 클릭합니다.
스냅숏 #2 - 스냅숏 #1이라는 차이 뷰가 열립니다. 기본적으로 지배자 뷰가 표시됩니다.다음 그림에서는 이 뷰를 보여 줍니다.
.png "Dominators 뷰에서의 스냅숏 차등")
이 뷰에서 대부분의 메모리를 계속 사용하는 개체부터 메모리를 사용하는 개체 목록을 봅니다.기본적으로 JavaScript 메모리 분석기는 Windows 런타임 및 Windows Library for JavaScript에서 만드는 기본 제공 개체를 필터링합니다.이를 통해 응용 프로그램 관련 코드에 정보의 초점을 맞출 수 있습니다.
data 개체의 보존 크기 차이 값이 400KB를 초과함을 확인할 수 있습니다.
팁
원하는 개체나 식별자를 찾기 어려운 경우 일부 뷰에서는 이름 필터 상자에 식별자 이름을 입력하여 특정 식별자를 찾고 선택할 수 있습니다.
식별자 목록에서 data 식별자를 마우스 오른쪽 단추로 클릭하고 루트 뷰에서 보기를 클릭합니다.
스냅숏 #2 - 스냅숏 #1 차이 뷰의 루트 뷰에 선택한 값이 나타납니다.루트 뷰에는 Global 개체에 대해 검사 중인 개체가 참조되는 위치가 표시됩니다.이를 통해 메모리 문제가 발생하는 위치를 식별할 수 있습니다.다음은 이때의 루트 뷰 일부를 보여 줍니다.트리 맨 위의 Global 개체는 보이지 않습니다.
.png "Roots 뷰에서의 스냅숏 차등")
루트 뷰에서는 홈 페이지의 ready 함수에 의해 호출되는 익명의 함수에서 data 변수를 참조하며 이 변수의 루트 경로가 winControl 개체를 포함하는 DIV 요소로 지정됨을 확인할 수 있습니다.프로그램에 대한 지식을 바탕으로 이 제어 개체는 응용 프로그램의 시작 단추를 가리킴을 알 수 있습니다.
응용 프로그램으로 전환하고 탐색 단추를 클릭합니다.
탐색 단추를 클릭하면 새 페이지로 이동합니다.이 응용 프로그램을 간단하게 만들기 위해 홈 페이지를 방금 다시 로드했습니다.
Visual Studio로 전환하고 힙 스냅숏 만들기을 클릭합니다.
스냅숏 #3에서 힙의 크기와 개체 수가 이전 스냅숏 이후 크게 변경되지 않았음을 확인할 수 있습니다.스냅숏의 모양은 다음과 같습니다.
.png "탐색 단추를 누른 후의 스냅숏")
시작을 누른 후 응용 프로그램에서 생성되는 데이터(배열)은 탐색을 눌러 새 페이지로 이동(이 경우 다시 로드)할 때 삭제되어야 합니다.그러나 데이터가 삭제되지 않으므로 이 문제를 수정하겠습니다.
요약 뷰에서 중지 단추를 클릭합니다.
메모리 문제 수정
home.js에서 탐색 단추에 대한 이벤트 처리 코드를 제거합니다.
function nButtonClicked(args) { WinJS.Navigation.navigate('/pages/home/home.html'); }다음 코드로 바꿉니다.
function nButtonClicked(args) { data = null; WinJS.Navigation.navigate('/pages/home/home.html'); }디버그 메뉴에서 JavaScript 메모리 분석을 가리키고 시작 프로젝트 시작을 클릭합니다.
이전 섹션에서 설명한 동일한 절차에 따라 세 개의 스냅숏을 만듭니다.단계는 여기에 요약되어 있습니다.
Visual Studio로 전환하고 힙 스냅숏 만들기을 클릭합니다.
응용 프로그램에서 시작 단추를 클릭합니다.
Visual Studio로 전환하고 힙 스냅숏 만들기을 클릭합니다.
응용 프로그램에서 탐색 단추를 클릭합니다.
Visual Studio로 전환하고 힙 스냅숏 만들기을 클릭합니다.
스냅숏 #3에서 힙 크기가 시작을 누르고 데이터를 생성하기 전의 힙 크기와 비슷함을 확인할 수 있습니다.스냅숏은 다음과 같습니다.
.png "메모리 문제가 수정된 스냅숏")
스냅숏 #3에서 힙 크기를 표시하는 왼쪽의 파란색 텍스트를 클릭합니다.
스냅숏 #3에 대한 지배자 뷰가 열립니다.이는 차이 뷰가 아니라 스냅숏 #3의 세부 뷰입니다.
이름 필터 상자에 data를 입력합니다.
이번에는 힙에 data 변수가 없습니다.메모리 문제가 수정된 것입니다.