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