이 출시되었습니다! 11월의 새로운 기능 및 수정 사항을 읽어보세요.

성능 프로파일링 JavaScript

Visual Studio Code는 JavaScript 프로그램에 대한 성능 프로파일을 수집하고 볼 수 있도록 지원합니다. 시작하려면 먼저 Node.js 프로그램 또는 브라우저 앱에 대한 디버거를 구성해야 합니다.

프로파일 유형

최적화하려는 내용에 따라 여러 가지 유형의 프로파일을 지정할 수 있습니다.

  • CPU 프로파일 - CPU 프로파일은 JavaScript 실행 중 프로그램이 시간을 어디에 소비하고 있는지 알려줍니다. 비동기 프로미스 또는 콜백을 기다릴 수 있지만 한 번에 하나의 JavaScript 표현식만 실행된다는 점을 기억하십시오. CPU 프로파일은 초당 약 10,000개의 샘플을 수집하여 해당 시점에 실행 중인 표현식(있는 경우)을 알려줍니다.
  • 힙 프로파일 - 힙 프로파일은 프로그램에서 시간이 지남에 따라 메모리가 할당되는 방식을 알려줍니다. 메모리 할당은 비용이 많이 들 수 있으며 코드에서 할당하는 메모리 양을 줄이면 성능 향상으로 이어질 수 있습니다.
  • 힙 스냅샷 - 힙 스냅샷은 프로그램이 메모리를 할당한 위치를 즉시 보여줍니다. 프로그램이 많은 RAM을 사용하고 있으며 그 출처를 알고 싶다면 힙 스냅샷이 유용할 수 있습니다. 힙 스냅샷 수집은 더 복잡한 프로그램의 경우 몇 분이 걸릴 수 있으며, 힙 스냅샷 보기는 현재 내장 편집기에서 지원되지 않습니다.

프로파일 수집

프로파일을 수집하려면 프로그램을 디버깅해야 합니다. 디버깅 중에는 몇 가지 방법을 통해 프로파일을 수집할 수 있습니다.

  • 호출 스택 보기에서 '기록' 버튼을 사용합니다. 이를 통해 CPU 프로파일, 힙 프로파일 및 힙 스냅샷을 가져올 수 있습니다.
  • 프로그램에서 console.profile()을 호출합니다. 이렇게 하면 CPU 프로파일이 수집됩니다.

기록 버튼 사용

디버깅 중인 경우 실행 및 디버그 보기(⇧⌘D (Windows, Linux Ctrl+Shift+D))로 전환하고 **호출 스택** 보기를 찾습니다. 디버그하려는 세션에 커서를 놓고 **성능 프로파일 기록** 버튼을 선택합니다. 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서도 이 명령을 실행할 수 있습니다.

Screenshot showing the button

그러면 VS Code에서 어떤 유형의 성능 프로파일을 기록할지 묻습니다. 관련 있는 것을 선택하십시오.

마지막으로 VS Code에서 프로파일 기록을 중지할 시점을 묻습니다. 다음 중 하나를 선택할 수 있습니다.

  • 수동으로 중지할 때까지 프로파일 기록
  • 정해진 기간 동안 프로파일 기록
  • 특정 중단점에 도달할 때까지 프로파일 기록

첫 번째 옵션을 선택한 경우 디버그 도구 모음에 표시되는 큰 빨간색 "기록" 아이콘을 클릭하여 프로파일을 중지할 수 있습니다. 프로파일이 수집된 후 프로파일 뷰어가 자동으로 열립니다.

console.profile 사용

console.profile을 호출하여 프로파일을 시작하고 console.profileEnd를 호출하여 프로파일을 중지함으로써 코드를 수동으로 계측할 수 있습니다. 이 두 호출 사이에서 CPU 프로파일이 수집됩니다.

console.profile();
doSomeVeryExpensiveWork();
console.profileEnd();

결과로 생성된 .cpuprofile은 작업 영역 폴더에 자동으로 저장됩니다. 해당 파일을 선택하면 내장된 프로파일 뷰어에서 열 수 있습니다.

프로파일 분석

테이블 보기

VS Code에는 JavaScript .cpuprofile 및 .heapprofile 파일을 볼 수 있는 통합 시각화 도구가 있습니다. 이러한 파일 중 하나를 열면 먼저 다음과 유사한 테이블 보기가 표시됩니다.

Screenshot showing the profile table

이것은 프로그램의 **하향식** 보기입니다. 각 행은 프로그램의 함수를 나타내며, 기본적으로 해당 특정 함수에서 소비된 시간을 기준으로 정렬됩니다. 이것은 "자체 시간"이라고도 합니다. 함수의 "총 시간"은 해당 함수 및 호출한 모든 함수에서 소비된 시간의 합입니다. 각 테이블 행을 확장하여 해당 함수가 어디에서 호출되었는지 확인할 수 있습니다.

예를 들어 다음 코드를 생각해 보겠습니다.

function a() {
  doSomethingFor5Seconds();
  b();
}

function b() {
  doSomethingFor3Seconds();
}

a();

이 경우 a의 자체 시간은 5초이고 a의 총 시간은 8초입니다. b의 자체 시간과 총 시간은 모두 3초입니다. 힙 프로파일은 동일한 방식으로 작동하지만, 각 함수 또는 해당 호출자에서 할당된 메모리 양을 나타내기 위해 자체 크기와 총 크기를 사용합니다.

플레임 뷰

테이블 보기는 특정 경우에 유용하지만, 종종 프로파일의 더 시각적인 표현을 보고 싶을 수 있습니다. 테이블 보기의 오른쪽 상단에 있는 플레임 🔥 아이콘을 클릭하여 이를 수행할 수 있습니다. 아직 플레임 뷰 편집기를 제공하는 추가 확장 프로그램을 설치하지 않았다면 설치하라는 메시지가 표시될 수 있습니다.

Heap profile flame chart

처음에는 혼란스러울 수 있지만, 걱정하지 마십시오. 이해할 수 있도록 설명해 드리겠습니다!

CPU 프로파일의 경우 가로축은 프로파일의 시간 축이므로 각 순간에 프로그램이 무엇을 하고 있었는지 볼 수 있습니다. 힙 프로파일의 경우 가로축은 프로그램에서 할당한 총 메모리입니다.

그래프의 각 막대 또는 '플레임'은 호출 스택입니다. 가장 바깥쪽의 최상위 함수 호출(또는 호출 스택의 '바닥')은 편집기 맨 위에 표시되며, 호출한 함수는 아래에 표시됩니다. 막대의 너비는 총 시간 또는 총 메모리에 의해 결정됩니다.

플레임 그래프의 항목을 클릭하여 자세한 정보를 볼 수 있으며, 마우스 휠을 사용하여 확대/축소할 수 있습니다. 확대된 경우 차트의 아무 곳이나 드래그하여 탐색할 수도 있습니다.

좌측 편향 뷰

CPU 프로파일을 작업하는 경우 보고 있는 플레임 그래프가 위의 그래프만큼 이해하기 쉽지 않을 가능성이 높습니다. 다음과 같은 많은 개별 호출 스택이 있을 수 있습니다.

A noisy CPU profile

분석을 더 쉽게 하기 위해 VS Code는 유사한 호출 스택을 모두 함께 그룹화하는 "좌측 편향" 뷰를 프로파일합니다.

Toggle button

이것은 프로파일의 시간순 보기에서 힙 프로파일과 유사한 것으로 전환됩니다. 가로축은 여전히 총 프로파일 지속 시간이지만, 각 막대는 해당 스택에서 호출된 **모든** 시간 동안 해당 함수 호출의 총 시간을 나타냅니다.

A nicer CPU profile

이 보기는 서버와 같이 개별 호출은 상대적으로 빠르지만 여러 호출에 걸쳐 전체적으로 가장 비용이 많이 드는 함수를 파악하려는 애플리케이션에 훨씬 더 유용합니다.

12/10/2025
English 한국어 中文(简体)
© . This site is unofficial and not affiliated with Microsoft.