Dale St. Marthe
실적 패널을 사용하여 웹사이트의 실적을 분석합니다.
개요
Performance 패널을 사용하면 웹 애플리케이션의 CPU 성능 프로필을 기록할 수 있습니다. 프로필을 분석하여 잠재적인 성능 병목 현상과 리소스 사용을 최적화하는 방법을 찾습니다.
Performance 패널을 사용하여 다음을 수행할 수 있습니다.
- 성능 프로필을 기록합니다.
- 캡처 설정을 변경합니다.
- 실적 보고서를 분석합니다.
웹사이트 성능 개선에 대한 종합 가이드는 런타임 성능 분석을 참조하세요.
성능 패널 열기
Performance 패널을 열려면 DevTools를 열고 상단의 탭 모음에서 Performance를 선택합니다.
또는 다음 단계를 따라 명령어 메뉴를 사용하여 성능 패널을 열 수 있습니다.
- DevTools를 엽니다.
- 다음을 눌러 명령어 메뉴를 엽니다.
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
Performance panel를 입력하고 성능 패널 표시를 선택한 다음 Enter 키를 누릅니다.
성능 프로필 기록
녹화할 준비가 되면 Performance 패널에 다음 옵션이 표시됩니다.
캡처 설정 변경
캡처 설정을 사용하면 DevTools가 성능 기록을 캡처하는 방식을 변경하고 보고서에서 추가 정보를 제공할 수 있습니다. 캡처 설정을 클릭합니다. 설정을 클릭하여 캡처 설정 메뉴에 액세스합니다.
캡처 설정 메뉴에서 다음 옵션을 선택합니다.
- JavaScript 샘플 사용 중지: 기본 트랙에 표시되고 기록 중에 호출되는 JavaScript 호출 스택의 기록을 사용 중지합니다. 성능 오버헤드를 줄입니다.
- 고급 페인트 계측 사용 설정 (느림): 고급 페인트 계측을 캡처합니다. 성능을 크게 저하시킵니다.
- CSS 선택자 통계 사용 설정 (느림): CSS 선택자 통계를 캡처합니다. 성능을 크게 저하시킵니다.
- CPU 제한: 느린 CPU 속도를 시뮬레이션합니다.
- 네트워크 제한: 느린 네트워크 속도를 시뮬레이션합니다.
- 하드웨어 동시 실행:
navigator.hardwareConcurrency에서 보고된 값을 구성합니다.
실적 보고서 분석하기
실적 패널을 사용하는 방법에 관한 전체 가이드는 실적 기록 분석을 참고하세요.
다음은 가이드의 주제 그룹과 기타 유용한 문서를 보여줍니다.
보고서를 탐색하는 방법 알아보기:
워크플로에서 중요한 사항에 집중하는 방법 알아보기:
Bottom-up, 호출 트리, 이벤트 로그 탭에 대해 알아보려면 다음 단계를 따르세요.
보고서를 분석하는 방법을 알아보려면 다음 단계를 따르세요.
- 기본 스레드 활동 보기
- Flame Chart 읽기
- 스크린샷 보기
- 메모리 측정항목 보기
- 녹음의 일부분 길이 확인하기
- 스타일 재계산 이벤트 중 CSS 선택자 성능 분석
- 성능 패널을 사용하여 Node.js 성능 프로파일링
- 초당 프레임 수 (FPS) 분석
- 타임라인 이벤트 참조
이 패널을 활용하여 실적을 개선하세요
웹사이트의 실적을 개선하는 데 도움이 되는 다른 패널을 살펴보세요.