성능 모니터를 사용하면 사이트의 로드 및 런타임 성능을 빠르게 파악할 수 있습니다.
개요
성능 모니터 패널에는 실적 측정항목을 실시간으로 그래프로 보여주는 타임라인이 표시됩니다. 측정항목을 클릭하여 표시하거나 숨깁니다. 그런 다음 앱과 상호작용할 때 그래프가 어떻게 변하는지 확인합니다.
성능 모니터는 다음 측정항목을 추적합니다.
- CPU 사용량.
- 자바스크립트 힙 크기.
- 페이지에 있는 DOM 노드, JavaScript 이벤트 리스너, 문서 및 프레임의 총 개수입니다.
- 초당 레이아웃 및 스타일 재계산
성능 모니터 패널 열기
Performance Monitor 패널을 열려면 다음 안내를 따르세요.
- DevTools를 엽니다.
- 다음을 눌러 명령어 메뉴를 엽니다.
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
Performance monitor를 입력하고 Show Performance Monitor를 선택한 다음 Enter 키를 누릅니다. DevTools가 DevTools 창 하단에 Performance Monitor 패널을 표시합니다.
또는 오른쪽 상단에서 more_vert 옵션 더보기 > 도구 더보기 > 성능 모니터를 선택합니다.
성능 모니터링 패널 사용
성능 모니터는 웹사이트의 런타임 성능에 대한 일반적인 정보를 제공합니다.
웹사이트와 상호 작용하면서 측정항목 값이 어떻게 변하는지 관찰하면 개선 기회를 발견할 수 있습니다.
성능 모니터의 유용한 기능은 페이지를 탐색하는 동안 성능이 유지된다는 것입니다. 따라서 프런트엔드 개발자는 성능 모니터를 열고 웹사이트를 스크롤하며 DOM 노드 및 레이아웃/초 측정항목을 살펴보면 레이아웃 스래싱과 같은 문제를 방지할 수 있습니다.
사이트의 로드 시간이 느리다고 신고하는 경우 성능 모니터를 통해 문제가 되는 영역을 확인해 보세요.
예를 들어 CPU 사용량이 급증하면 코드가 비효율적임을 나타낼 수 있습니다. 또한 일반적으로 페이지에 포함된 JS 이벤트 리스너가 많으면 코드를 리팩터링하고 이 개수를 줄여 메모리를 확보하는 것이 좋습니다.
성능 분석을 이제 막 시작했다면 먼저 Lighthouse 패널을 사용한 다음 성능 패널 또는 성능 모니터를 사용하여 자세히 살펴보는 것이 좋습니다.