유니버설 Windows 앱의 HTML UI 응답성 분석Analyze HTML UI responsiveness in Universal Windows Apps

이 항목에서는 유니버설 Windows 앱에 사용할 수 있는 성능 도구인 UI 응답성 프로파일러를 사용하여 앱에서 성능 문제를 격리하는 방법에 대해 설명합니다.This topic describes how to isolate performance problems in your apps using the UI Responsiveness Profiler, a performance tool available for Universal Windows Apps.

UI 응답성 프로파일러는 일반적으로 다음과 같은 증상과 함께 발생하는 UI 응답성 문제 또는 플랫폼의 의도하지 않은 결과와 같은 문제를 격리하는 데 유용합니다.The UI Responsiveness Profiler can help you isolate problems such as UI responsiveness issues or platform side effects that typically occur with these symptoms:

  • UI의 응답성 부족.Lack of responsiveness in the UI. UI 스레드가 차단될 경우 앱의 응답 속도가 느려질 수 있습니다.The app might be slow to respond if the UI thread is getting blocked. UI 스레드를 차단할 수 있는 몇 가지 원인에는 과도한 동기 JavaScript 코드, 과도한 CSS 레이아웃 또는 CSS 계산 작업, 동기 XHR 요청, 가비지 수집, 과도한 그리기 시간 또는 프로세서를 많이 사용하는 JavaScript 코드가 포함됩니다.Some things that might block the UI thread include excessive synchronous JavaScript code, excessive CSS layout or CSS calculation work, synchronous XHR requests, garbage collection, excessive paint times, or processor-intensive JavaScript code.

  • 앱 또는 페이지의 로딩 시간을 느리게 합니다.Slow loading time for the app or for a page. 일반적으로 리소스를 로드하는 데 과도한 시간이 소요될 때 발생합니다.This is typically caused by excessive time spent loading resources.

  • 예상보다 빈도가 낮은 시각적 개체 업데이트.Visual updates that are less frequent than expected. UI 스레드의 사용량이 너무 많아 부드러운 프레임 속도를 유지할 수 없을 경우 발생합니다.This occurs if the UI thread is too busy to maintain a smooth frame rate. 예를 들어, UI 스레드가 사용 중인 경우 프레임이 손실될 수도 있습니다.For example, if the UI thread is busy, frames might be dropped. 또한 네트워크 요청, 이미지 디코딩, 그리기 등의 일부 UI가 아닌 스레드 작업이 시각적 개체 업데이트 빈도를 제한할 수도 있습니다.Some non-UI thread work such as network requests, image decoding, and paints can also limit the frequency of visual updates. (모든 그리기가 UI 스레드에서 수행되지는 않습니다.)(Not all painting is performed on the UI thread.)

HTML UI 응답성 도구 실행Run the HTML UI Responsiveness Tool

작업 중인 UWP 또는 Windows 8.1 앱이 Visual Studio에서 열려 있거나 Windows 8 이상을 실행하는 컴퓨터에 설치되어 있는 경우 HTML UI 응답성 도구를 사용할 수 있습니다.You can use the HTML UI Responsiveness tool when you have a working UWP or Windows 8.1 app open in Visual Studio or installed on a computer running Windows 8 or later.

  1. Visual Studio에서 응용 프로그램을 실행하는 경우 표준 도구 모음의 디버깅 시작 목록에서 Windows Phone 에뮬레이터, 로컬 컴퓨터, 시뮬레이터또는 원격 컴퓨터등의 배포 대상을 선택합니다.If you're running the app from Visual Studio, on the Standard toolbar, in the Start Debugging list, choose a deployment target such as one of the Windows Phone emulators, Local Machine, Simulator, or Remote Machine.

  2. 디버그 메뉴에서 성능 프로파일러...를 선택합니다.On the Debug menu, choose Performance Profiler....

    프로파일러의 분석 대상을 변경하려면대상 변경을 선택합니다.If you want to change the analysis target for the profiler, chooseChange Target.

    분석 대상 변경Change analysis target

    분석 대상에 사용할 수 있는 옵션은 다음과 같습니다.The following options are available for the analysis target:

    • 시작 프로젝트.Startup Project. 현재 시작 프로젝트를 분석하려면 이 옵션을 선택합니다.Choose this option to analyze the current startup project. 원격 컴퓨터 또는 장치에서 앱을 실행 중인 경우 기본값인 이 설정을 사용해야 합니다.If you're running the app on a remote machine or device, you must use this setting, which is the default value.

    • 실행 중인 응용 프로그램.Running App. 실행 중인 앱 목록에서 UWP 앱을 선택하려면 이 옵션을 선택합니다.Choose this option to select a UWP app from a list of running apps. 원격 컴퓨터 또는 장치에서 앱을 실행 중인 경우 이 옵션을 사용할 수 없습니다.You can't use this option when you're running the app on a remote machine or device.

      소스 코드에 액세스할 수 없을 때 이 옵션을 사용하여 컴퓨터에서 실행 중인 앱의 성능을 분석할 수 있습니다.You can use this option to analyze performance of apps that are running on your computer when you don't have access to source code.

    • 설치된 응용 프로그램.Installed App. 분석할 설치된 응용 프로그램을 선택하려면 이 옵션을 선택합니다.Choose this option to select an installed app that you want to analyze. 원격 컴퓨터 또는 장치에서 앱을 실행 중인 경우 이 옵션을 사용할 수 없습니다.You can't use this option when you're running the app on a remote machine or device.

      소스 코드에 액세스할 수 없을 때 이 옵션을 사용하여 컴퓨터에 설치한 앱의 성능을 분석할 수 있습니다.You can use this option to analyze the performance of apps that you have installed on your computer when you don't have access to source code. 사용자가 직접 개발하는 응용 프로그램을 제외한 모든 응용 프로그램의 성능을 분석하려는 경우에도 이 옵션이 유용할 수 있습니다.This option can also be useful when you just want to analyze the performance of any app outside your own app development.

  3. 사용 가능한 도구에서 HTML UI 응답성을 선택한 다음 시작을 선택합니다.From Available Tools, select HTML UI Responsiveness, and then choose Start.

  4. UI 응답성 프로파일러를 시작할 때 사용자 계정 컨트롤 창이 표시되어 Visual Studio ETW Collector.exe를 실행할 수 있는 권한을 요청할 수 있습니다.When you start the UI Responsiveness Profiler, a User Account Control window might request your permission to run Visual Studio ETW Collector.exe. 를 선택합니다.Choose Yes.

    앱과 상호 작용하여 관련된 성능 시나리오를 테스트합니다.Interact with the app to test the relevant performance scenario. 자세한 워크플로는 다음 항목을 참조하세요. UI 응답성 문제 격리Isolate a visual throughput problem등의 배포 대상을 선택합니다.For a detailed workflow, see Isolate a UI responsiveness problem and Isolate a visual throughput problem.

  5. Alt+Tab을 눌러 Visual Studio로 전환합니다.Switch to Visual Studio by pressing Alt+Tab.

  6. 응용 프로그램의 프로파일링을 중지하고 프로파일러가 수집한 데이터를 보려면 수집 중지를 선택합니다.To stop profiling the app and view data that the profiler gathered, choose Stop collection.

문제 격리Isolate an issue

다음 섹션에서는 성능 문제를 격리하는 데 도움이 되는 제안 사항을 제공합니다.The following section provides suggestions to help you isolate performance problems. 샘플 성능 테스트 앱을 사용하여 성능 문제를 확인 및 수정하는 방법에 대한 단계별 설명은 연습: UI 응답성 향상(HTML)을 참조하세요.For a step-by-step explanation of how to identify and fix performance issues by using a sample performance testing app, see Walkthrough: Improving UI responsiveness (HTML).

UI 응답성 문제 격리Isolate a UI responsiveness problem

다음 단계에서는 UI 응답성 프로파일러를 보다 효과적으로 사용할 수 있는 제안 워크플로를 제공합니다.These steps provide a suggested workflow that might help you use the UI Responsiveness Profiler more effectively:

  1. Visual Studio에서 앱을 엽니다.Open your app in Visual Studio.

  2. 응용 프로그램에서 UI 응답성 문제를 테스트합니다.Test your app for UI responsiveness issues. (Ctrl+F5 키를 눌러 디버깅 없이 응용 프로그램을 시작합니다.)(Press Ctrl+F5 to start your app without debugging.)

    문제가 발견되면 계속해서 문제가 발생한 시간대를 좁히거나 동작의 원인이 되는 트리거를 파악합니다.If you find an issue, continue testing to try to narrow the time frame in which the issue occurs, or try to identify triggers that cause the behavior.

  3. Visual Studio로 전환하고(Alt+Tab) 응용 프로그램을 중지합니다(Shift+F5).Switch to Visual Studio (press Alt+Tab) and stop your app (Shift+F5).

  4. 선택적으로 분석을 위한 코드 표시등의 배포 대상을 선택합니다.Optionally, add user marks to your code using Mark code for analysis.

    사용자 표식을 사용하면 프로파일러 데이터를 보는 동안 응답성 문제를 식별하는 데 도움이 될 수 있습니다.User marks can help you identify the responsiveness problem while you're viewing profiler data. 예를 들어 응답성 문제를 일으키는 코드 섹션의 시작 및 끝 부분에 사용자 표식을 추가할 수 있습니다.For example, you can add a user mark at the beginning and end of a section of code that is causing a responsiveness issue.

  5. 이전 섹션의 지침에 따라 UI 응답성 프로파일러를 실행합니다.Run the UI Responsiveness Profiler by following the instructions in the previous section.

  6. UI 응답성 문제를 일으키는 상태로 응용 프로그램을 설정합니다.Put the app into the state that results in a UI responsiveness issue.

  7. Visual Studio로 전환하고(Alt+Tab) UI 응답성 프로파일러의 프로파일러 탭에서 수집 중지 를 선택합니다.Switch to Visual Studio (press Alt+Tab) and choose Stop collection in the profiler tab of the UI Responsiveness Profiler.

  8. 사용자 표식을 추가한 경우 프로파일러의 진단 세션 타임라인 보기 에 나타납니다.If you have added user marks, they will appear in the View the diagnostic session timeline of the profiler. 다음 그림에서는 코드에서 특정 작업을 지정하는 데 사용되는 단일 사용자 표식을 보여 줍니다.The following illustration shows a single user mark used to specify a particular operation in your code.

    사용자 표시를 나타내는 진단 눈금자Diagnostics Ruler showing a user mark

  9. 사용자 표시, 응용 프로그램 수명 주기 이벤트 또는 그래프에 표시되는 데이터를 사용해서 타임라인 및 프로파일러 그래프에서 관심 영역을 식별합니다.Identify an area of interest in the timeline and the profiler graphs by using user marks, app lifecycle events, or data visible in the graphs. 다음은 그래프에서 데이터를 분석 및 사용하는 데 도움이 되는 몇 가지 지침입니다.Here are some guidelines to help you analyze and use the data in the graphs:

    • 진단 세션 타임라인 보기 을 사용해 분석을 위한 코드 표시, 앱 수명 주기 이벤트 및 이러한 이벤트에 연결된 타임라인과 다른 그래프의 데이터에 대한 타임라인을 확인합니다.Use the View the diagnostic session timeline to view Mark code for analysis, app lifecycle events, and the associated timeline for these events and the timeline for data in the other graphs.

    • CPU utilization graph 를 사용해 CPU 작업 및 특정 기간에 CPU에서 처리하는 작업 유형에 관한 일반적인 정보를 볼 수 있습니다.Use the CPU utilization graph to view general information about CPU activity and the type of work it is handling during a specific period of time. CPU 작업이 과도한 기간에는 응답성 문제 및 프레임 저하가 발생할 가능성이 높습니다.Periods of excessive CPU activity are more likely to result in responsiveness issues and dropped frames.

    • 게임 또는 리치 미디어 앱을 개발하는 경우 시각적 처리량 보기(FPS) 를 사용하여 프레임 속도가 떨어지는 기간을 식별합니다.If you're developing a game or rich media app, use the View visual throughput (FPS) to identify periods of time in which the frame rate dropped.

  10. 그래프의 한 부분을 클릭하고 포인터를 끌어 선택하거나 Tab 키와 화살표 키를 사용해서 그래프 중 하나의 관심 영역을 선택합니다.Select the area of interest in one of the graphs by clicking a part of the graph and dragging the pointer to make a selection (or by using the Tab key and arrow keys). 기간을 선택하면 프로파일러 아래쪽 창의 시간 표시 막대 정보 그래프가 선택한 기간에 대해서만 표시하도록 변경됩니다.When you select a time period by making a selection, the timeline details graph in the profiler's lower pane changes to show only the selected time period.

    다음 그림은 관심 영역이 강조 표시된 CPU 사용률 그래프를 보여줍니다.The following illustration shows the CPU utilization graph with an area of interest highlighted.

    CPU 사용률 그래프CPU utilization graph

  11. 타임라인 세부 정보 보기 를 사용하여 너무 자주 실행되거나 완료되는 데 너무 많은 시간이 걸리는 이벤트에 대한 자세한 정보를 확인합니다.Use the View timeline details to get detailed information about events that are either running too frequently or taking too much time to complete. 예를 들어, 다음을 확인합니다.For example, look for the following:

    • 이벤트 수신기, 타이머 및 애니메이션 프레임 콜백.Event listeners, timers, and animation frame callbacks. 특정 이벤트에 따라 제공되는 데이터에는 수정된 DOM 요소의 ID, 수정된 CSS 속성, 소스 위치에 대한 링크, 연결된 이벤트 또는 콜백 함수의 이름이 포함될 수 있습니다.Depending on the specific event, data provided may include the ID of modified DOM elements, the name of modified CSS properties, a link to the source location, and the name of the associated event or callback function.

    • 렌더링 요소를 발생시킨 레이아웃 또는 스크립팅 이벤트(예: window.getComputedStyles호출).Layout or scripting events that resulted in rendering elements, such as calls to window.getComputedStyles. 이벤트의 연결된 DOM 요소가 제공됩니다.The associated DOM element for the event is provided.

    • 응용 프로그램에서 로드되는 페이지 또는 URL 리소스(예: HTML 구문 분석 이벤트에 대한 스크립트 계산).Pages or URL resources that are loaded by the app, such as script evaluations for HTML parsing events. 파일 이름 또는 리소스가 제공됩니다.The file name or resource is provided.

    • 다른 이벤트는 Profiler event reference에 지정되어 있습니다.Other events specified in Profiler event reference.

    프로파일러의 대부분의 유용한 정보는 타임라인 세부 정보 그래프에 표시됩니다.Most of the usable information in the profiler appears in the timeline details graph.

  12. CPU 사용률 또는 시각적 처리량(FPS) 그래프에서 한 영역을 선택하고 확대 (단추 또는 상황에 맞는 메뉴 사용)를 눌러서 더 자세한 정보를 확인할 수 있습니다.With an area selected in the CPU utilization or visual throughput (FPS) graph, choose Zoom in (either the button or context menu) to get more detailed information. 그래프의 시간 표시 막대가 선택한 기간만 표시하도록 변경됩니다.The timeline for the graph changes to show only the selected time period.

  13. 확대할 때는 CPU 사용률 또는 시각적 처리량 그래프의 한 부분을 선택합니다.When zoomed in, select a portion of the CPU utilization or visual throughput graph. 선택하면 프로파일러 아래쪽 창의 시간 표시 막대 정보 그래프가 선택한 기간에 대해서만 표시하도록 변경됩니다.When you make a selection, the timeline details graph in the profiler's lower pane changes to show only the selected time period.

Isolate a visual throughput problemIsolate a visual throughput problem

CPU 사용률이 과도한 기간은 프레임 속도가 낮거나 일관적이지 않을 수 있습니다.Periods of excessive CPU utilization can result in low or inconsistent frame rates. 리치 미디어 응용 프로그램 및 게임을 개발하는 경우 시각적 처리량 그래프는 CPU 사용률 그래프보다 중요한 데이터를 제공할 수 있습니다.If you develop rich media apps and games, the visual throughput graph may provide more important data than the CPU utilization graph.

시각적 처리량 문제를 격리하려면 이전 섹션에 설명된 단계를 수행하지만 시각적 처리량 그래프를 주요 데이터 요소 중 하나로 사용합니다.To isolate a visual throughput problem, follow the steps described in the previous section, but use the visual throughput graph as one of the key data points.

분석을 위한 코드 표시Mark code for analysis

그래프에 표시되는 데이터 관련 앱 코드의 섹션을 분리하도록 하기 위해, 함수가 실행되는 순간 프로파일러가 사용자 표시(역삼각형)를 타임라인에 삽입하도록 지시하는 함수 호출을 응용 프로그램에 추가할 수 있습니다.To help isolate a section of app code that's associated with data that appears in the graphs, you can add a function call in your app that instructs the profiler to insert a user mark—an inverted triangle—in the timeline at the moment the function gets executed. CPU 사용률 그래프, 시각적 처리량 그래프 및 시간 표시 막대 정보 그래프의 타임라인에 추가한 모든 사용자 표시가 나타납니다.Any user mark that you add appears in the timeline for the CPU utilization graph, the visual throughput graph, and the timeline details graph.

사용자 표식을 추가하려면 응용 프로그램에 다음 코드를 추가합니다.To add a user mark, add the following code to your app. 이 예제에서는 이벤트 설명으로 "데이터 가져오기"가 사용됩니다.This example uses "getting data" as the description of the event.

if (performance && performance.mark) {  
    performance.mark("getting data");  
}  

사용자 표시 위에 마우스 포인터를 놓으면 이벤트에 대한 이 설명이 도구 설명으로 표시됩니다.The description of the event appears as a tooltip when you rest the mouse pointer over the user mark. 필요한 만큼 사용자 표식을 추가할 수 있습니다.You can add as many user marks as you need.

참고

Chrome 명령인console.timeStamp명령도 사용자 표식으로 표시됩니다.console.timeStamp, a Chrome command, also appears as a user mark.

다음 그림은 단일 사용자 표시 및 해당 도구 설명이 포함된 진단 눈금자를 나타냅니다.The following illustration shows the diagnostics ruler with a single user mark and its tooltip.

사용자 표시를 나타내는 진단 눈금자Diagnostics Ruler showing a user mark

또한 타임라인 세부 정보 보기에서 도구 생성 이벤트를 만들어 두 사용자 표식 간에 경과되는 시간을 표시할 수 있습니다.You can also create tool-generated events in the timeline details view to show the duration of time that passes between two user marks. 다음 코드는 두 번째 사용자 표식 및 두 사용자 표식을 실행하는 중간에 경과되는 시간 단위를 추가합니다(이전 코드는 첫 번째 사용자 표식을 표시).The following code adds a second user mark and a measurement of the time that passes between execution of the two user marks (the preceding code shows the first user mark).

if (performance.mark && performance.measure) {  
    performance.mark("data retrieved");  
    performance.measure("data measure", "getting data", "data retrieved");  
}  

두 번째 사용자 표식을 지정하지 않은 경우 performance.measure 는 타임스탬프를 두 번째 사용자 표식으로 사용합니다.If the second user mark isn't specified, performance.measure uses a timestamp as the second user mark. 첫 번째 사용자 표식이 필요합니다.The first user mark is required.

기간 단위는 타임라인 세부 정보 보기에서 사용자 측정 이벤트로 표시되며 선택 시 자세한 정보를 보여줍니다.The duration measurement appears as a User measure event in the timeline details view, and shows detailed information when selected.

시간 표시 막대 세부 정보 보기의 사용자 측정 이벤트User measure event in the timeline details view

데이터 분석Analyze data

다음 단원에서는 프로파일러에 표시되는 데이터를 해석하기 위한 정보를 제공합니다.The following sections provide information to help interpret data that appears in the profiler.

진단 세션 타임라인 보기View the diagnostic session timeline

프로파일러 위쪽에 있는 눈금자는 프로파일링된 정보의 타임라인을 보여 줍니다.The ruler at the top of the profiler shows the timeline for profiled information. 이 타임라인은 CPU 사용률 그래프 및 시각적 처리량 그래프 모두에 적용됩니다.This timeline applies to both the CPU utilization graph and the visual throughput graph.

여러 가지 응용 프로그램 수명 주기 이벤트에 대해 표시되는 도구 설명이 포함된 진단 세션 타임라인의 모양은 다음과 같습니다.Here's what the diagnostic session timeline looks like with a tooltip displayed for several app lifecycle events:

진단 세션 눈금자Diagnostic session ruler

타임라인은 활성화 이벤트와 같은 응용 프로그램 수명 주기 이벤트가 발생할 때 표시되며, 사용자 코드에 추가할 수 있는 사용자 표시(사용자 표식 삼각형)를 표시합니다.The timeline shows when app lifecyle events, like the activation event, occur and it shows user marks (user mark triangles) that you can add to your code. 이벤트를 선택하여 추가 정보와 함께 도구 설명을 표시할 수 있습니다.You can select the events to show tooltips with more information. 사용자 표식에 대한 자세한 내용은 이 항목의 분석을 위한 코드 표시 를 참조하세요.For more info about user marks, see Mark code for analysis in this topic.

응용 프로그램 수명 주기 이벤트는 다이아몬드 기호로 표시됩니다.App lifecycle events appear as diamond symbols. 이는 DOM 이벤트로, 다음을 포함합니다.These are DOM events, which include the following:

  • 코드의 활성화된 이벤트 처리기에서 일반적으로 발생하는DOMContentLoadedLoad events, which typically occur in the activated event h및ler in your code.DOMContentLoaded and Load events, which typically occur in the activated event handler in your code. 이벤트에 대한 도구 설명으로 특정 이벤트 및 해당 URL을 표시합니다.A tooltip for the event shows the specific event and the URL.

  • 다른 페이지를 탐색할 때 발생하는 탐색 이벤트.A navigation event, which occurs when you navigate to a different page. 이벤트에 대한 도구 설명으로 대상 페이지 URL을 표시합니다.A tooltip for the event shows the destination page URL.

CPU 사용률 보기View CPU utilization

CPU 사용률 그래프에서는 과도한 CPU 작업이 있던 기간을 확인할 수 있습니다.The CPU utilization graph enables you to identify periods of time in which there is excessive CPU activity. 여기에서는 일정 기간에 걸쳐 응용 프로그램의 평균 CPU 사용에 대한 정보를 제공합니다.It provides information about the app's average CPU consumption over a period of time. 정보는 로드, 스크립팅, 가비지 수집(GC), 스타일 지정, 렌더링, 이미지 디코딩과 같은 특정 범주를 나타내도록 색으로 구분되어 있습니다.Information is color-coded to represent the following specific categories: Loading, Scripting, garbage collection (GC), Styling, Rendering, and Image decoding. 이러한 범주에 대한 자세한 내용은 이 항목 뒷부분에 나오는 Profiler event reference 를 참조하세요.For more info about these categories, see Profiler event reference later in this topic.

CPU 사용률 그래프는 전체 앱 스레드에 소요된 시간을 하나 이상의 CPU에 대한 CPU 사용률 값을 단일 백분율 값으로 결합하여 보여 줍니다.The CPU utilization graph shows the amount of time spent on all app threads, combining CPU utilization values for one or more CPUs into a single percentage value. 둘 이상의 CPU를 사용 중일 경우 CPU 사용률 값은 100%를 초과할 수 있습니다.The CPU utilization value might exceed 100 percent when more than one CPU is in use.

참고

GPU 사용량은 그래프에 표시되지 않습니다.GPU utilization does not appear in the graph.

다음 예제에서는 CPU 사용률 그래프의 모양을 보여 줍니다.This example shows what the CPU utilization graph looks like:

CPU 사용률 그래프CPU utilization graph

이 그래프를 사용하여 다음을 수행합니다.Use this graph to:

  • 일반적인 문제 영역을 식별합니다.Identify general areas of concern.

  • 시간 표시 막대 정보 그래프에 표시하려는 특정 기간을 선택합니다.Choose a specific time period to display in the timeline details graph. 기간을 선택하려면 그래프의 한 부분을 선택하고 포인터를 끌어서 선택합니다.To choose a time period, select a part of the graph and drag the pointer to make a selection.

  • 확대 단추를 선택하여 선택한 기간에 대해 보다 자세한 보기를 표시합니다.Get a more detailed view of a selected time period by choosing the Zoom in button.

    그래프 사용에 대한 자세한 내용은 이 항목의 Isolate a UI responsiveness problem 를 참조하세요.For more info on using the graph, see Isolate a UI responsiveness problem in this topic.

시각적 처리량 보기(FPS)View visual throughput (FPS)

시각적 처리량 그래프에서는 프레임이 손실된 기간을 확인할 수 있습니다.The visual throughput graph enables you to identify periods of time in which the frame rate dropped. 응용 프로그램에 대한 FPS(초당 프레임 수)를 표시합니다.It shows the frames per second (FPS) for the app. 이 그래프는 게임 및 리치 미디어 앱 개발에 매우 유용합니다.This graph is most useful for the development of games and rich media apps.

표시된 FPS 값은 실제 프레임 속도와 다를 수 있습니다.The displayed FPS value might differ from the actual frame rate. 이 그래프에서 데이터를 검토할 때는 다음 정보에 유의하세요.Keep this information in mind when examining data in this graph:

  • 그래프는 앱이 특정 시간에 달성할 수 있는 FPS를 보여 줍니다.The graph shows the FPS that the app is capable of achieving at any specific time. 앱이 유휴 상태이면 FPS는 모니터 화면 주사율과 같습니다.When the app is idle, the FPS is the same as the monitor refresh rate.

  • 앱이 시각적 업데이트가 필요한 작업을 수행 중이라면 실제 FPS의 그래프를 보여 줍니다.The graph shows the actual FPS if the app is doing work that requires visual updates.

  • 프레임이 손실되는 경우 그래프에 0 값을 보여 줍니다.The graph shows a value of zero if frames are being dropped.

    다음 예제에서는 시각적 처리량 그래프의 모양을 보여 줍니다.This example shows what the visual throughput graph looks like:

    시각적 처리량 그래프Visual throughput graph

    시각적 처리량 그래프를 사용하여 다음을 수행합니다.Use the visual throughput graph to:

  • 일반적인 문제 영역을 식별합니다.Identify general areas of concern.

  • 시간 표시 막대 정보 그래프에 표시하려는 특정 기간을 선택합니다.Choose a specific time period to display in the timeline details graph. 기간을 선택하려면 그래프의 한 부분을 선택하고 포인터를 끌어서 선택합니다.To choose a time period, select a part of the graph and drag the pointer to make a selection.

  • 확대 단추를 선택하여 선택한 기간에 대해 보다 자세한 보기를 표시합니다.Get a more detailed view of a selected time period by choosing the Zoom in button.

타임라인 세부 정보 보기View timeline details

타임라인 세부 정보 그래프는 UI 응답성 프로파일러의 하단 창에 표시됩니다.The timeline details graph appears in the lower pane of the UI Responsiveness Profiler. 여기에는 선택한 기간 중 CPU 시간 소비가 가장 높은 이벤트에 대한 순차적 및 계층적 정보가 제공됩니다.It provides sequential and hierarchical information about events that consumed the most CPU time during selected time periods. 이 그래프는 특정 이벤트를 트리거한 항목과 일부 이벤트에 대해 이벤트가 소스 코드로 다시 매핑되는 방법을 확인하는 데 도움이 됩니다.This graph can help you determine what triggered a particular event and, for some events, how the event maps back to source code. 또한 이 그래프로부터 화면에 시각적 개체 업데이트를 그리는 데 필요한 시간을 확인할 수도 있습니다.This graph also helps you determine the time required to paint visual updates on the screen.

이 그래프는 시각적 개체 업데이트를 느려지게 할 수 있는 UI 스레드 작업 및 백그라운드 스레드 작업을 보여 줍니다.The graph shows UI thread work and work on background threads that can contribute to slow visual updates. 이 그래프에는 JavaScript JIT 작업, 비동기 GPU 작업, 호스트 프로세스 외부에서 수행된 작업(예: RuntimeBroker.exe 및 dwm.exe 작업) 또는 프로파일링에 대해 아직 계측되지 않은 Windows 런타임 영역의 작업(예: 디스크 I/O)은 표시되지 않습니다.The graph doesn't show JavaScript JIT work, asynchronous GPU work, work performed outside the host process (such as RuntimeBroker.exe and dwm.exe work), or work for areas of the Windows Runtime that haven't yet been instrumented for profiling (such as disk I/O).

백그라운드 스레드에서 이벤트가 발생할 때 스레드 ID는 이벤트 이름 옆 괄호 안에 표시됩니다.When an event occurs on a background thread, the thread ID appears in brackets next to the event name.

다음 예제에서는 DOM 클릭 이벤트를 위한 이벤트 수신기가 선택된 경우의 시간 표시 막대 정보 그래프 모양을 보여 줍니다.This example shows what the timeline details graph looks like when the event listener for a DOM click event is selected:

시간 표시 막대 세부 정보 그래프Timeline details graph

이 그림에서 이벤트 이름 열의 spinAction 이벤트 처리기는 선택 시 소스 코드의 이벤트 처리기로 연결되는 링크입니다.In this illustration, the spinAction event handler in the Event name column is a link that, when selected, will take you to the event handler in the source code. 오른쪽 창에서 콜백 함수 속성은 소스 코드에 대한 같은 링크를 제공합니다.In the right pane, the Callback function property provides the same link to source code. 또한 다른 속성에는 관련 DOM 요소와 같은 이벤트에 대한 정보가 제공됩니다.Other properties also provide information about the event, such as the associated DOM element.

CPU 사용률 및 시각적 처리량(FPS) 그래프의 타임라인 부분을 선택하면 시간 표시 막대 정보 그래프에는 선택한 기간에 대한 자세한 정보가 표시됩니다.If you select a portion of the timeline for the CPU utilization and visual throughput (FPS) graph, the timeline details graph shows detailed information for the selected time period.

시간 표시 막대 정보 그래프의 이벤트는 CPU 사용률 그래프에 표시된 것과 같은 작업 범주를 표시하도록 색이 지정됩니다.The events in the timeline details graph are color-coded to represent the same categories of work that are shown in the CPU utilization graph. 이벤트 범주 및 특정 이벤트에 대한 자세한 내용은 이 항목의 Profiler event reference 를 참조하세요.For more info about the event categories and the specific events, see Profiler event reference in this topic.

시간 표시 막대 정보 그래프를 사용하여 다음을 수행합니다.Use the timeline details graph to:

  • 이벤트의 대략적인 시작 시간, 지속 시간 및 종료 시간을 시간 표시 막대 뷰 및 표 뷰에서 봅니다.View approximate start times, duration, and end times for an event in a timeline and grid view. 시간 표시 막대 정보 그래프는 표 뷰에서 확대/축소 상태에 따라 30밀리초에서 30초까지 범위의 지속 시간을 표시할 수 있습니다.The timeline details graph can show periods ranging from 30 milliseconds to 30 seconds in the grid view, depending on the zoom state. 기간 값:For duration values:

    • 포괄 시간은 이벤트 자식을 포함하는 이벤트의 지속 시간을 나타냅니다.Inclusive times represent the duration of the event, including the event children. 이 값은 표 뷰에 가장 먼저 표시됩니다.In the grid view, this value appears first.

    • 전용 시간은 이벤트 자식을 포함하지 않는 이벤트의 지속 시간을 나타냅니다.Exclusive times represent the duration of the event, not including the event children. 이 값은 표 뷰에 괄호로 묶여 표시됩니다.In the grid view, this value appears in parentheses.

  • 자식 이벤트를 보려면 계층 구조의 이벤트를 확장합니다.Expand an event in the hierarchy to view children of the event. 이벤트 자식은 부모 이벤트에 의해 발생한 다른 이벤트입니다.The event children are other events that are raised by the parent event. 예를 들어, DOM 이벤트에는 자식으로 표시되는 이벤트 수신기가 있을 수 있습니다.For example, a DOM event might have event listeners that appear as children. 이벤트 수신기에는 레이아웃 이벤트와 같은 자신의 결과인 다른 이벤트가 있을 수 있습니다.An event listener might have other events that result from it, like a layout event.

  • 시작 시간(기본값) 또는 지속 시간을 기준으로 이벤트를 정렬합니다.Sort events by start time (the default) or duration. 정렬 기준 목록을 사용하여 정렬 방법을 선택합니다.Use the Sort by list to select a sorting method.

  • 오른쪽 창의 세부 정보 창에 각 이벤트에 대한 세부 정보가 표시됩니다.View details for each event in the details pane (right pane). 다음 예에서 볼 수 있듯이 속성은 특정 이벤트에 따라 달라집니다.The properties vary depending on the particular event, as these examples show:

    • 타이머, 이벤트 수신기(DOM 이벤트) 및 애니메이션 프레임 콜백의 경우, 해당 콜백 함수 속성은 소스 코드 위치에 대한 링크와 이벤트 처리기 또는 콜백 함수의 이름을 함께 제공합니다.For timers, event listeners (DOM events), and animation frame callbacks, the Callback function property provides a link to the source code location along with the name of the event handler or callback function.

    • 타이머, 이벤트 수신기(DOM 이벤트), 레이아웃 이벤트 및 애니메이션 프레임 콜백의 경우 포괄 시간 요약 섹션(색으로 구분된 링)에 선택한 이벤트 및 해당 자식의 색으로 구분된 요약을 표시할 수 있습니다.For timers, event listeners (DOM events), layout events, and animation frame callbacks, a color-coded summary of the selected event and all its children appear in the Inclusive time summary section (the color-coded ring). 각 이미지의 색으로 구분된 조각은 이벤트 형식을 나타냅니다.Each color-coded slice of the image represents an event type. 도구 설명에는 이벤트 형식 이름이 제공됩니다.Tooltips provide the event type name.

    시간 표시 막대 정보 그래프 및 포괄 시간 요약 을 통해 최적화할 영역을 식별할 수 있습니다.The timeline details graph and Inclusive time summary can help you identify areas for optimization. 이러한 뷰 중 하나에 작은 작업이 여러 개 표시되면 해당 이벤트를 최적화할 수 있습니다.If either of these views shows large numbers of small tasks, the event may be a candidate for optimization. 예를 들어 앱에서 DOM 요소를 자주 새로 고쳐서 레이아웃 및 HTML 구문 분석 이벤트가 많이 발생할 수 있습니다.For example, an app may be refreshing DOM elements frequently, resulting in large numbers of layout and HTML parsing events. 이 작업을 일괄 처리하여 성능을 최적화할 수 있습니다.You may be able to optimize performance by batching this work.

타임라인 세부 정보 필터링Filter timeline details

특정 이벤트의 상황에 맞는 메뉴에서 이벤트 필터 를 선택하여 타임 라인 세부 정보의 뷰를 특정 이벤트로 필터링할 수 있습니다.You can filter the view in the timeline details to a particular event by selecting Filter to event from the context menu for a specific event. 이 옵션을 선택하면 타임라인 및 표 뷰가 선택된 이벤트로 범위가 정해집니다.When you choose this option, the timeline and grid view are scoped to the selected event. CPU 사용률 그래프에서의 선택도 특정 이벤트로 범위가 정해집니다.The selection in the CPU utilization graph also scopes to the specific event.

이벤트에 대한 시간 표시 막대 필터링Filtering timeline to an event

필터 이벤트Filter events

타임라인 세부 정보 그래프에서 일부 이벤트를 필터링해 데이터의 노이즈를 줄이거나 성능 시나리오와 관련되지 않은 데이터를 제거할 수 있습니다.You can filter out some events from the timeline details graph to reduce noise in the data, or to eliminate data that is not interesting for your performance scenario. 이벤트 이름 또는 이벤트 기간으로 필터링하거나 여기서 설명하는 특정 필터로 필터링할 수 있습니다.You can filter by event name or event duration, or by specific filters described here.

이미지 디코딩, 잘못된 다운로드 및 GC 이벤트를 필터링하려면 아래쪽 창의 필터 아이콘에서 백그라운드 작업 옵션의 선택을 취소합니다.To filter out image decoding, speculative downloading, and GC events, clear the Background activity option from the filter icon in the lower pane. 이러한 이벤트는 실행 가능성이 높지 않지만 기본적으로 숨겨집니다.Because these events are not very actionable, they are hidden by default.

시간 표시 막대에서 이벤트 필터링Filtering events in the timeline

HTTP 요청 이벤트를 필터링하려면 아래쪽 창의 필터 아이콘에서 네트워크 트래픽 옵션의 선택을 취소합니다.To filter out HTTP request events, clear the Network traffic option from the filter icon in the lower pane. 기본적으로 이러한 이벤트는 타임라인 세부 정보 그래프에 표시됩니다.By default, these events are shown in the timeline details graph.

UI 스레드 작업을 필터링하려면 UI 작업 옵션의 선택을 취소합니다.To filter out UI thread activity, clear the UI activity option.

네트워크 대기 시간과 관련된 문제를 확인하려면 이 옵션의 선택을 취소하고 네트워크 트래픽 옵션을 선택합니다.Clear this option and select the Network traffic option to investigate issues related to network latency.

사용자 측정을 필터링하려면 사용자 측정 옵션의 선택을 취소합니다.To filter out user measures, clear the User measures option. 사용자 측정은 자식이 없는 최상위 이벤트입니다.User measures are top-level events with no children.

프레임별 이벤트 그룹화Group events by frame

타임라인 세부 정보 보기에서 개별 프레임에 나타나는 이벤트를 그룹화할 수 있습니다.You can group events that appear in the timeline details view to individual frames. 이러한 프레임 이벤트는 도구로 생성된 이벤트이며, paint 이벤트 간에 발생하는 모든 UI 스레드 작업의 최상위 이벤트 컨테이너를 나타냅니다.These frame events are tool-generated events, and represent top-level event containers for all UI thread work that occurs between paint events. 이 뷰를 사용하도록 설정하려면 프레임별 최상위 이벤트 그룹화를 선택합니다.To enable this view, select Group top level events by frames.

프레임별로 최상위 이벤트 그룹화Group top level events by frame

프레임별로 이벤트를 그룹화하는 경우 타임라인 세부 정보 보기의 최상위 이벤트는 각각 프레임을 나타냅니다.When you group the events by frame, the top-level events in the timeline details view each represent a frame.

프레임별로 그룹화된 시간 표시 막대 이벤트Timeline events grouped by frame

진단 세션 저장Save a diagnostic session

Visual Studio에서 진단 세션과 연결된 탭을 닫을 때 이 세션을 저장할 수 있습니다.In Visual Studio, you can save a diagnostic session when you close the tab that's associated with the session. 저장된 세션은 나중에 다시 열 수 있습니다.Saved sessions can be reopened at a later time.

Profiler event referenceProfiler event reference

UI 응답성 프로파일러에서 프로파일러 이벤트는 항목별로 분류되어 색이 지정됩니다.Profiler events are categorized and color-coded in the UI Responsiveness Profiler. 다음은 이러한 이벤트 범주입니다.These are the event categories:

  • 로드.Loading. 앱이 처음 로드될 때 앱 리소스를 검색하고 HTML 및 CSS를 구문 분석하는 데 걸린 시간을 나타냅니다.Indicates time spent retrieving app resources and parsing HTML and CSS when the app first loads. 여기에는 네트워크 요청이 포함될 수 있습니다.This can include network requests.

  • 스크립팅 중Scripting. JavaScript의 구문 분석 및 실행에 걸린 시간을 나타냅니다.Indicates time spent parsing and running JavaScript. 여기에는 DOM 이벤트, 타이머, 스크립트 평가 및 애니메이션 프레임 작업이 포함됩니다.This includes DOM events, timers, script evaluation, and animation frame work. 여기에는 사용자 코드와 라이브러리 코드가 모두 포함됩니다.It includes both user code and library code.

  • GC.GC. 가비지 컬렉션에 걸린 시간을 나타냅니다.Indicates time spent on garbage collection.

  • 스타일 지정.Styling. CSS를 구문 분석하고 요소 프레젠테이션 및 레이아웃을 계산하는 데 걸린 시간을 나타냅니다.Indicates time spent parsing CSS and calculating element presentation and layout.

  • 렌더링.Rendering. 화면 그리기에 걸린 시간을 나타냅니다.Indicates time spent painting the screen.

  • 이미지 디코딩.Image decoding. 이미지의 압축을 풀고 디코딩하는 데 걸린 시간을 나타냅니다.Indicates time spent decompressing and decoding images.

    스크립트 및 스타일 지정 범주의 경우, UI 응답성 프로파일러에서 시간 표시 막대 정보 그래프에 작업할 수 있는 데이터를 제공할 수 있습니다.For the script and styling categories, the UI Responsiveness Profiler might provide data that you can act on in the timeline details graph. 스크립팅 이슈를 문제로 식별한 경우, UI 응답성 프로파일러로 CPU 샘플링 프로파일러를 실행할 수 있습니다.If you identify scripting issues as a problem, you can run the CPU Sampling profiler with the UI Responsiveness Profiler. 또는 Visual Studio 함수 프로파일러를 사용하여 보다 자세한 데이터를 얻을 수도 있습니다.Alternatively, you could use the Visual Studio function profiler to obtain more detailed data. 자세한 내용은 JavaScript 메모리를 참조하세요.For more info, see JavaScript Memory.

    다른 이벤트 범주의 경우 앱에 기능을 추가하여 발생하는 플랫폼의 의도하지 않은 결과를 식별할 수 있지만, 이 경우 UI 응답 프로파일러를 사용하여 특정 성능 문제를 해결할 수는 없습니다.For the other event categories, you might be able to identify platform side effects that result from adding features to your app, but in these cases you might not be able to resolve the particular performance issues by using the UI Responsiveness Profiler.

    다음 표에서는 이벤트 및 해당 설명을 보여 줍니다.This table shows the events and their descriptions:

이벤트Event 이벤트 범주Event category 발생 경우Occurs when
CSS 구문 분석CSS parsing 로드Loading 새 CSS 콘텐츠가 발견되어 이 CSS 콘텐츠를 구문 분석하려고 했습니다.New CSS content was encountered and an attempt was made to parse the CSS content.
HTML 구문 분석HTML parsing 로드Loading 새 HTML 콘텐츠가 발견되어 이 콘텐츠를 노드로 구문 분석하고 DOM 트리에 콘텐츠를 삽입하려고 했습니다.New HTML content was encountered and an attempt was made to parse the content into nodes and insert the content into the DOM tree.
HTTP 요청HTTP request 로드Loading DOM에서 원격 리소스가 발견되었거나 XMLHttpRequest가 생성되어 HTTP 요청이 발생했습니다.A remote resource was found in the DOM, or an XMLHttpRequest was created that resulted in an HTTP request.
잘못된 다운로드Speculative downloading 로드Loading 페이지의 HTML 콘텐츠가 필요한 리소스에 대해 검색되어 해당 리소스에 대한 후속 HTTP 요청이 빠르게 예약될 수 있습니다.The page's HTML content was searched for required resources so that subsequent HTTP requests for the resources could be scheduled quickly.
애니메이션 프레임 콜백 함수Animation frame callback function 스크립팅Scripting 브라우저에서 다른 프레임을 렌더링하려고 했고, 이것이 앱 제공 콜백 함수를 트리거했습니다.The browser was going to render another frame, and this triggered an app-provided callback function.
DOM 이벤트DOM event 스크립팅Scripting DOM 이벤트가 발생하여 실행되었습니다.A DOM event occurred and was executed.

context 또는 DOMContentLoaded 과 같은 DOM 이벤트에 대한 click속성이 괄호 안에 표시됩니다.The context property for the DOM event, such as DOMContentLoaded or click, is shown in parentheses.
이벤트 수신기Event listener 스크립팅Scripting 이벤트 수신기가 호출되어 실행되었습니다.An event listener was called and executed.
미디어 쿼리 수신기Media query listener 스크립팅Scripting 등록된 미디어 쿼리가 무효화되어 연결된 수신기가 실행되었습니다.A registered media query was invalidated which resulted in the execution of its associated listener(s).
Mutation observerMutation observer 스크립팅Scripting 하나 이상의 관찰된 DOM 요소가 수정되어 MutationObserver의 연결된 콜백이 실행되었습니다.One or more observed DOM elements were modified, which resulted in the execution of a MutationObserver's associated callback.
스크립트 계산Script evaluation 스크립팅Scripting 새 SCRIPT 요소가 DOM에서 발견되어 이 스크립트를 구문 분석하고 실행하려고 했습니다.A new SCRIPT element was found in the DOM, and an attempt was made to parse and execute the script.
TimerTimer 스크립팅Scripting 예약된 타이머의 시간이 지나 연결된 해당 콜백 함수가 실행되었습니다.A scheduled timer elapsed, and this resulted in the execution of its associated callback function.
Windows 런타임 비동기 콜백 함수Windows Runtime async callback function 스크립팅Scripting Windows 런타임 개체에서 Promise 콜백 함수를 트리거한 비동기 작업이 완료되었습니다.An async operation that triggered a Promise callback function was completed by a Windows Runtime object.
Windows 런타임 이벤트Windows Runtime event 스크립팅Scripting Windows 런타임 개체에서 등록된 수신기를 트리거한 이벤트가 발생했습니다.An event that occurred on a Windows Runtime object triggered a registered listener.
가비지 수집Garbage collection GCGC 더 이상 사용 중이 아닌 개체의 메모리 수집에 걸린 시간입니다.Time was spent collecting memory for objects that were no longer in use.
CSS 계산CSS calculation 스타일 지정Styling DOM에서 영향을 받는 모든 요소의 스타일 속성을 다시 계산해야 하는 항목이 변경되었습니다.Changes were made to the DOM that required the style properties of all affected elements to be recalculated.
레이아웃Layout 스타일 지정Styling DOM에서 영향을 받는 모든 요소의 크기 및/또는 위치를 다시 계산해야 하는 항목이 변경되었습니다.Changes were made to the DOM that required the size and/or position of all affected elements to be recalculated.
그리기Paint 렌더링Rendering DOM에서 시각적 항목이 변경되었고 페이지의 일부를 다시 렌더링하려고 했습니다.Visual changes were made to the DOM, and an attempt was made to re-render portions of the page.
레이어 렌더링Render layer 렌더링Rendering 독립적으로 렌더링된 DOM 조각(레이어라고 함)에서 페이지의 일부분을 렌더링해야 하는 시각적 항목이 변경되었습니다.Visual changes were made to an independently rendered fragment of the DOM (called a layer), and the changes required a portion of the page to be rendered.
이미지 디코딩Image decoding 이미지 디코딩Image Decoding DOM에 이미지가 포함되어 해당 이미지를 원본 형식에서 비트맵으로 압축 해제하고 디코딩하려 했습니다.An image was included in the DOM, and an attempt was made to decompress and decode the image from its original format into a bitmap.
프레임Frame N/AN/A DOM에서 시각적 항목이 변경되어 페이지에서 영향을 받는 모든 부분이 다시 그려져야 합니다.Visual changes were made to the DOM that required all affected portions of the page to be redrawn. 그룹화에 사용되는 도구 생성 이벤트입니다.This is a tool-generated event used for grouping.
사용자 측정User measure N/AN/A 앱 관련 시나리오는 performance.measure 메서드를 사용하여 측정되었습니다.An app-specific scenario was measured using the performance.measure method. 코드 분석에 사용되는 도구 생성 이벤트입니다.This is a tool-generated event used for analyzing code.

추가 정보Additional information

참고 항목See Also

프로파일링 도구Profiling Tools