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