이 페이지는 Cloud Translation API를 통해 번역되었습니다.

성능 기능 참조

Kayce Basques

Sofia Emelianova

이 페이지에서는 성능 분석과 관련된 Chrome DevTools 기능에 대한 포괄적인 참고 자료를 제공합니다.

런타임 성능 분석 방법에 관한 가이드 튜토리얼은 런타임 성능 분석 시작하기를 참고하세요. 페이지 성능을 개선하는 방법을 알아봤습니다.

실적 기록

런타임 또는 로드 성능을 기록할 수 있습니다.

런타임 성능 기록

실행 중인 페이지의 성능을 분석하려면 다음과 같이 런타임 성능을 기록합니다. 사용할 수 있습니다

분석하려는 페이지로 이동합니다.
DevTools에서 Performance 탭을 클릭합니다.
Record 를 클릭합니다.
페이지와 상호작용합니다. DevTools는 이 작업의 결과로 발생하는 모든 페이지 활동을 기록합니다. 상호작용한다는 것입니다.
녹화를 다시 클릭하거나 중지를 클릭하여 녹화를 중지합니다.

로드 성능 기록

페이지를 로드할 때 페이지의 성능을 분석하려면 다음과 같이 로드 성능을 기록합니다. 실행할 수 있습니다

분석하려는 페이지로 이동합니다.
DevTools의 Performance 패널을 엽니다.
Start profiling and refresh page를 클릭합니다. 입니다. DevTools는 먼저 about:blank로 이동하여 남아 있는 스크린샷과 트레이스를 삭제합니다. 그런 다음 DevTools가 페이지가 새로고침되는 동안 실적 측정항목을 기록한 다음 로드가 완료되고 몇 초 후에 광고가 재생됩니다.

DevTools는 활동이 가장 많이 발생한 기록 부분을 자동으로 확대합니다.

페이지 로드 기록입니다.

이 예에서 성능 패널에는 페이지 로드 중의 활동이 표시됩니다.

녹화 중 스크린샷 캡처

Screenshots 체크박스를 사용 설정하여 녹화하는 동안 모든 프레임의 스크린샷을 캡처합니다.

스크린샷 체크박스

스크린샷과 상호작용하는 방법을 알아보려면 스크린샷 보기를 참고하세요.

녹화하는 동안 가비지 컬렉션 강제 실행

페이지를 기록하는 동안 가비지 수집을 클릭합니다. mop를 사용하여 가비지 컬렉션을 강제 적용합니다.

가비지를 수집합니다.

녹화 설정 표시

캡처 설정을 클릭합니다. 부터 DevTools가 성능 기록을 캡처하는 방식과 관련된 더 많은 설정을 표시합니다.

캡처 설정 섹션

JavaScript 샘플 사용 중지

기본적으로 기록의 기본 트랙에는 JavaScript의 자세한 호출 스택이 표시됩니다. 녹화 중에 호출된 함수입니다. 이러한 호출 스택을 사용 중지하려면 다음을 실행하세요.

캡처 설정 메뉴를 엽니다. 녹화 설정 표시를 참고하세요.
JavaScript 샘플 사용 중지 체크박스를 선택합니다.
페이지를 녹화합니다.

다음 스크린샷은 JavaScript 샘플 사용 중지와 사용 설정 간의 차이점을 보여줍니다. 이 샘플링이 사용 중지되면 녹음의 기본 트랙은 JavaScript 호출 스택에 적용됩니다.

JS 샘플이 사용 중지된 경우의 기록 예

이 예는 사용 중지된 JS 샘플이 있는 녹음 파일을 보여줍니다.

JS 샘플이 사용 설정된 경우 기록의 예

이 예는 사용 설정된 JS 샘플이 있는 녹음 파일을 보여줍니다.

녹화하는 동안 네트워크 제한

녹화하는 동안 네트워크를 제한하는 방법:

캡처 설정 메뉴를 엽니다. 녹화 설정 표시를 참고하세요.
네트워크를 선택한 제한 수준으로 설정합니다.

기록하는 동안 CPU 제한

기록하는 동안 CPU를 제한하려면 다음 단계를 따르세요.

캡처 설정 메뉴를 엽니다. 녹화 설정 표시를 참고하세요.
CPU를 선택한 제한 수준으로 설정합니다.

제한은 컴퓨터의 성능과 관련이 있습니다. 예를 들어 2배 감속 옵션은 CPU가 일반적인 성능보다 2배 느리게 작동합니다. DevTools는 실제로 CPU를 시뮬레이션할 수 없으며 모바일 장치의 아키텍처가 일반적인 모바일 장치와 매우 다르기 때문에 데스크탑 및 노트북입니다.

CSS 선택자 통계 사용 설정

장기간 실행되는 ReCalculate Style 이벤트 중에 CSS 규칙 선택기의 통계를 보려면 다음 단계를 따르세요.

캡처 설정 메뉴를 엽니다. 녹화 설정 표시를 참고하세요.
CSS 선택자 통계 사용 설정 체크박스를 선택합니다.

자세한 내용은 스타일 재계산 이벤트 중에 CSS 선택자 성능 분석 방법을 참고하세요.

고급 페인트 계측 사용 설정

자세한 페인트 계측을 보려면 다음을 실행하세요.

캡처 설정 메뉴를 엽니다. 녹화 설정 표시를 참고하세요.
고급 페인트 계측 사용 설정 체크박스를 선택합니다.

페인트 정보와 상호작용하는 방법을 알아보려면 뷰 레이어 및 뷰 페인트를 참고하세요. 프로파일러를 사용하면 됩니다.

하드웨어 동시 실행 에뮬레이션

다양한 프로세서 코어 수로 애플리케이션 성능을 테스트하려면 navigator.hardwareConcurrency 속성에서 보고하는 값을 구성하면 됩니다. 일부 애플리케이션은 이 속성을 사용하여 애플리케이션의 동시 로드 수준을 제어합니다(예: Emscripten pthread 풀 크기 제어).

하드웨어 동시 실행을 에뮬레이션하려면 다음 안내를 따르세요.

캡처 설정 메뉴를 엽니다. 녹화 설정 표시를 참고하세요.
하드웨어 동시 실행을 선택하고 입력 상자에서 코어 수를 설정합니다. <ph type="x-smartling-placeholder"></ph>

DevTools는 Performance 탭 옆에 경고 아이콘 을 표시하여 하드웨어 동시 실행 에뮬레이션이 사용 설정되었음을 알립니다.

기본값 10로 되돌리려면 되돌리기 버튼을 클릭합니다.

기록 저장하기

녹음 파일을 저장하려면 마우스 오른쪽 버튼으로 클릭하고 Save Profile을 선택합니다.

녹음 파일 로드

녹화 파일을 로드하려면 마우스 오른쪽 버튼을 클릭하고 Load Profile을 선택합니다.

이전 녹음 지우기

녹화 후 녹화 지우기를 누릅니다. <ph type="x-smartling-placeholder"></ph> 실적 패널에서 녹음 파일을 삭제합니다.

녹음 내용 지우기를 탭합니다.

기록 분석

런타임 성능을 기록하거나 로드 성능을 기록한 후에는 성능 패널에는 방금 발생한 작업의 실적을 분석할 수 있는 많은 데이터가 제공됩니다.

녹음 파일 탐색

성능 기록을 자세히 살펴보려면 기록의 일부를 선택하고, 긴 Flame 차트를 스크롤하고, 확대 및 축소하고, 탐색경로를 사용하여 확대/축소 수준 간에 이동할 수 있습니다.

녹음의 일부분 선택

Performance 패널의 작업 모음과 기록 상단에 CPU 및 NET 차트와 함께 타임라인 개요 섹션이 표시됩니다.

작업 모음 아래의 타임라인 개요

기록의 일부를 선택하려면 타임라인 개요를 길게 클릭한 다음 왼쪽이나 오른쪽으로 드래그합니다.

키보드를 사용하여 특정 부분을 선택하려면 다음 단계를 따르세요.

기본 트랙 또는 주변 트랙으로 포커스를 이동합니다.
확대, 왼쪽으로 이동, 축소, 오른쪽으로 이동하려면 각각 W, A, S, D 키를 사용합니다.

트랙패드를 사용하여 일부를 선택하는 방법:

타임라인 개요 섹션 또는 트랙 (기본 및 인접 트랙) 위로 마우스를 가져갑니다.
두 손가락을 사용하여 위로 스와이프하여 축소하고, 왼쪽으로 스와이프하여 왼쪽으로 이동, 아래로 스와이프하여 확대합니다. 오른쪽으로 이동하려면 오른쪽으로 스와이프합니다.

탐색경로를 만들고 확대/축소 수준 간에 이동하기

타임라인 개요를 사용하면 여러 개의 중첩된 탐색경로를 연속적으로 만들고 확대/축소 수준을 높여 선택한 수준으로 바로 이동할 수 있습니다.

탐색경로를 만들고 사용하려면 다음 단계를 따르세요.

타임라인 개요에서 녹화의 일부를 선택합니다.
선택 항목 위로 마우스를 가져가 N ms zoom_in 버튼을 클릭합니다. 선택 항목이 확장되어 타임라인 개요가 채워집니다. 탐색경로 체인이 타임라인 개요 상단에 빌드되기 시작합니다.
이전 두 단계를 반복하여 다른 중첩된 탐색경로를 만듭니다. 선택 범위가 5밀리초보다 크면 계속해서 탐색경로를 중첩할 수 있습니다.
선택한 확대/축소 수준으로 이동하려면 타임라인 개요의 상단에 있는 체인에서 해당하는 탐색경로를 클릭합니다.

긴 Flame 차트 스크롤

기본 트랙 또는 그 주변 트랙의 긴 플레임 차트를 스크롤하려면 길게 클릭한 다음, 찾고 있는 항목이 표시될 때까지 원하는 방향으로 드래그합니다.

검색 활동

Performance(성능) 패널 하단에 있는 검색창을 열려면 다음을 누릅니다.

macOS: Command+F
Windows, Linux: Control+F

이 예에서는 하단 검색창에서 E로 시작하는 모든 활동을 찾는 정규 표현식을 보여줍니다.

쿼리와 일치하는 활동을 순환하는 방법은 다음과 같습니다.

expand_less 이전 또는 expand_less 다음 버튼을 클릭합니다.
이전 항목을 선택하려면 Shift+Enter 키를 누르고 다음 항목을 선택하려면 Enter 키를 누릅니다.

실적 패널에는 검색창에서 선택한 활동에 대한 도움말이 표시됩니다.

쿼리 설정을 수정하려면 다음 안내를 따르세요.

match_case 대소문자 일치를 클릭하여 쿼리를 대소문자를 구분합니다.
쿼리에 정규 표현식을 사용하려면 regular_expression 정규 표현식을 클릭합니다.

검색창을 숨기려면 취소를 클릭합니다.

트랙 순서 변경 및 숨기기

성능 트레이스를 정리하려면 트랙 구성 모드에서 트랙 순서를 변경하고 관련 없는 트랙을 숨깁니다.

트랙을 이동하고 숨기려면 다음 단계를 따르세요.

구성 모드로 전환하려면 트랙 이름을 마우스 오른쪽 버튼으로 클릭하고 트랙 구성을 선택합니다.
arrow_upward를 위쪽 또는 아래쪽 arrow_downward을 클릭하여 트랙을 위 또는 아래로 이동합니다. visibility_off를 클릭하여 숨깁니다.
완료되면 하단의 트랙 구성 완료를 클릭하여 구성 모드를 종료합니다.

이 워크플로의 실제 작동 방식을 확인하려면 동영상을 시청하세요.

Performance 패널은 새 트레이스의 트랙 구성을 저장하지만 다음 DevTools 세션에는 저장하지 않습니다.

기본 스레드 활동 보기

기본 트랙을 사용하여 페이지의 기본 스레드에서 발생한 활동을 확인합니다.

메인 트랙

이벤트를 클릭하면 요약 탭에서 이에 대한 자세한 정보를 확인할 수 있습니다. 실적 패널에 선택한 이벤트가 파란색으로 윤곽선이 표시됩니다.

요약 탭의 기본 스레드 이벤트에 관해 자세히 알아보기

이 예에서는 요약 탭의 get 함수 호출 이벤트에 대한 자세한 정보를 보여줍니다.

Flame Chart 읽기

Performance 패널은 Flame Chart에 기본 스레드 활동을 나타냅니다. x축은 시간 경과에 따른 기록을 나타냅니다. y축은 호출 스택을 나타냅니다. 상단의 이벤트는 아래 이벤트를 일으킵니다.

Flame Chart

이 예에서는 기본 트랙에 있는 플레임 차트를 보여줍니다. click 이벤트로 인해 익명 함수 호출이 발생했습니다. 그런 다음 이 함수를 onEndpointClick_이라고 하고 이는 handleClick_를 호출하는 식으로 이어집니다.

Performance 패널은 스크립트에 임의의 색상을 할당하여 Flame Chart를 분할하고 더 쉽게 읽을 수 있도록 합니다. 이전 예에서 한 스크립트의 함수 호출은 연한 파란색으로 표시됩니다. 다른 스크립트에서 걸려온 전화는 연한 분홍색으로 표시됩니다. 더 진한 노란색은 스크립팅 활동을 나타내고 보라색 이벤트는 렌더링 활동을 나타냅니다. 더 진한 노란색과 보라색 이벤트는 모든 기록에서 일관됩니다.

긴 작업도 빨간색 삼각형으로 강조표시되고 50밀리초를 초과하는 부분은 빨간색으로 음영 처리됩니다.

긴 작업입니다.

이 예에서 태스크는 400밀리초 이상 걸렸으므로 마지막 350밀리초를 나타내는 부분은 빨간색으로 음영 처리되지만 처음 50밀리초는 그렇지 않습니다.

또한 기본 트랙에는 profile() 및 profileEnd() 콘솔 함수로 시작하고 중지된 CPU 프로필에 관한 정보가 표시됩니다.

JavaScript 호출의 상세 Flame 차트를 숨기려면 JavaScript 샘플 사용 중지를 참고하세요. JS 샘플이 사용 중지되면 Event (click) 및 Function Call와 같은 상위 수준 이벤트만 표시됩니다.

이벤트 개시자 추적

기본 트랙에는 다음의 시작자와 시작자가 발생시킨 이벤트를 연결하는 화살표가 표시될 수 있습니다.

스타일 또는 레이아웃 무효화 -> 스타일 다시 계산 또는 레이아웃
애니메이션 프레임 요청 -> 애니메이션 프레임 실행됨
유휴 콜백 요청 -> 유휴 콜백 실행
타이머 설치 -> 타이머 실행됨
WebSocket 만들기 -> 전송... 및 WebSocket 핸드셰이크 수신 또는 WebSocket 삭제

화살표를 보려면 Flame Chart에서 시작자 또는 시작한 이벤트를 찾아 선택합니다.

요청에서 유휴 콜백 실행으로 이어지는 화살표

이 옵션을 선택하면 요약 탭에 개시자의 경우 시작자 링크가 표시되고, 시작한 이벤트에 대해서는 시작한 사람 링크가 표시됩니다. 클릭하면 해당 이벤트 사이를 이동할 수 있습니다.

'Initiator for' 링크를 클릭합니다.

Flame Chart에서 함수 및 하위 함수 숨기기

기본 스레드에서 Flame Chart를 깔끔하게 정리하기 위해 선택한 함수 또는 하위 요소를 숨길 수 있습니다.

Main 트랙에서 함수를 마우스 오른쪽 버튼으로 클릭하고 다음 옵션 중 하나를 선택하거나 해당하는 단축키를 누릅니다.
- 함수 숨기기 (H)
- 하위 요소 숨기기 (C)
- 반복되는 하위 항목 숨기기 (R)
- 자녀 재설정 (U)
- trace 재설정 (T)
- 무시 목록에 스크립트 추가 (I)
하위 항목이 숨겨진 함수 이름 옆에 arrow_drop_down 드롭다운 버튼이 표시됩니다.
숨겨진 하위 항목의 수를 확인하려면 arrow_drop_down 드롭다운 버튼 위로 마우스를 가져가세요.
숨겨진 하위 요소 또는 전체 Flame Chart가 있는 함수를 재설정하려면 함수를 선택하고 U를 누르거나 함수를 마우스 오른쪽 버튼으로 클릭하고 Reset trace를 각각 선택합니다.

플레임 차트에서 스크립트 무시

무시 목록에 스크립트를 추가하려면 차트의 스크립트를 마우스 오른쪽 버튼으로 클릭하고 무시 목록에 스크립트 추가를 선택합니다.

스크립트 무시 옵션이 포커스가 설정된 컨텍스트 메뉴

차트에서는 무시된 스크립트를 접고, 무시 목록으로 표시하고, 설정 설정 > 설정 > 무시 목록. 무시된 스크립트는 trace 또는 맞춤 제외 규칙에서 삭제하기 전까지 저장됩니다.

설정의 스크립트 무시 목록 탭

표에서 활동 보기

페이지를 기록한 후에는 기본 트랙에만 의존하여 활동을 분석할 필요가 없습니다. DevTools는 활동 분석을 위한 세 가지 테이블 형식 뷰도 제공합니다. 각 보기는 다음과 같은 다양한 관점을 가지고 있습니다.

가장 많은 작업을 유발하는 루트 활동을 보려면 Call Tree 탭을 선택합니다.
가장 많은 시간을 직접 보낸 활동을 확인하려면 Bottom-Up 탭.
활동을 기록 중에 발생한 순서대로 보려면 다음을 사용합니다. 이벤트 로그 탭.

원하는 항목을 더 빠르게 찾을 수 있도록 세 개의 탭 모두 필터 표시줄 옆에 고급 필터링 버튼이 있습니다.

match_case 대소문자 일치.
regular_expression 정규 표현식.
match_word 전체 단어를 매칭합니다.

고급 필터링용 세 개의 버튼

실적 패널의 표 형식 보기에는 함수 호출과 같은 활동의 링크가 표시됩니다. 디버그하기 위해 DevTools는 소스 파일에서 상응하는 함수 선언을 찾습니다. 또한 적절한 소스 맵이 있고 사용 설정된 경우 DevTools가 자동으로 원본 파일을 찾습니다.

링크를 클릭하여 Sources 패널에서 소스 파일을 엽니다.

이벤트 로그 탭의 소스 파일 링크

루트 활동

다음은 Call Tree 탭에서 언급된 루트 활동 개념에 대한 설명입니다. Bottom-Up 탭, Event Log 섹션입니다.

루트 활동은 브라우저가 작업을 실행하도록 하는 활동입니다. 예를 들어 페이지가 있는 경우 브라우저는 Event 활동을 루트 활동으로 실행합니다. 그러면 Event로 인해 핸들러가 정의할 수 있습니다

기본 트랙의 플레임 차트에서 루트 활동은 차트 상단에 표시됩니다. 통화 중 트리 및 이벤트 로그 탭에서는 루트 활동이 최상위 항목입니다.

루트 활동의 예는 호출 트리 탭을 참조하세요.

호출 트리 탭

Call Tree 탭을 사용하여 가장 많은 작업을 유발하는 루트 활동을 확인합니다.

Call Tree 탭에는 녹화의 선택된 부분 동안의 활동만 표시됩니다. 자세한 내용은 일부분을 선택하는 방법을 알아보려면 녹음의 일부분 선택하기

호출 트리 탭

이 예에서는 Activity 열에 있는 항목의 최상위 수준(예: Event, Paint, Composite Layers는 루트 활동입니다. 중첩은 호출 스택을 나타냅니다. 포함 이 예시에서는 Event로 인해 Function Call이 발생했고, 이로 인해 button.addEventListener가 발생했고, 이로 인해 b이 발생했고, 등등.

Self Time(자체 시간)은 해당 활동에 직접 소요된 시간을 나타냅니다. 총 시간은 시간을 낭비하지 않을 수 있습니다.

자체 시간, 총 시간 또는 활동을 클릭하여 해당 열을 기준으로 표를 정렬합니다.

필터 상자를 사용하여 활동 이름별로 이벤트를 필터링합니다.

기본적으로 그룹화 메뉴는 그룹화 없음으로 설정됩니다. 그룹화 메뉴를 사용하여 활동 표와 같은 다양한 기준표를 생성합니다.

Show Heaviest Stack(무거운 스택 표시)을 클릭합니다. <ph type="x-smartling-placeholder"></ph> 활동 표 오른쪽에 다른 표가 나타납니다. 활동을 클릭하여 가장 무거운 스택 테이블. Heaviest Stack 테이블에는 선택한 활동을 실행하는 데 가장 오랜 시간이 걸렸다는 것을 알 수 있습니다.

상향식 탭

Bottom-Up 탭을 사용하면 직접 가장 많은 시간을 소요한 활동을 집계하여 볼 수 있습니다.

Bottom-Up 탭에는 녹화의 선택된 부분 동안의 활동만 표시됩니다. 자세한 내용은 일부분을 선택하는 방법을 알아보려면 녹음의 일부분 선택하기

상향식 탭

이 예의 기본 트랙 플레임 차트에서 wait()에 대한 세 번의 호출을 실행하는 데 걸린 시간입니다. 따라서 Bottom-Up 탭은 wait입니다. Flame Chart에서 wait 호출은 실제로는 수천 건의 Minor GC 호출입니다. 따라서 Bottom-Up 탭에서 다음으로 비용이 가장 많이 드는 활동은 Minor GC입니다.

Self Time(자체 시간) 열은 모든 활동에서 해당 활동에 직접 소요된 시간을 집계하여 나타냅니다. 확인할 수 있습니다

총 시간 열에는 해당 활동이나 그 하위 활동에서 보낸 집계된 시간이 표시됩니다.

이벤트 로그 탭

이벤트 로그 탭을 사용하여 있습니다.

이벤트 로그 탭에는 녹화 중 선택한 부분 동안의 활동만 표시됩니다. 자세한 내용은 일부분을 선택하는 방법을 알아보려면 녹음의 일부분 선택하기

이벤트 로그 탭

시작 시간 열은 시작 시간을 기준으로 활동이 시작된 지점을 나타냅니다. 확인할 수 있습니다. 이 예시에서 선택된 항목의 1573.0 ms 시작 시간 활동이 기록이 시작된 후 1573ms 후에 시작되었음을 의미합니다.

Self Time 열은 해당 활동에 직접 소요된 시간을 나타냅니다.

총 시간 열은 해당 활동 또는 그 활동에 직접 소요된 시간을 나타냅니다. 있습니다.

시작 시간, 자체 시간 또는 총 시간을 클릭하여 해당 열을 기준으로 표를 정렬합니다.

필터 상자를 사용하여 이름으로 활동을 필터링합니다.

Duration 메뉴를 사용하여 1ms 또는 15ms 미만으로 걸린 활동을 필터링합니다. 기본적으로 기간 메뉴가 모두로 설정되어 모든 활동이 표시됩니다.

Loading, Scripting, render 또는 Painting 체크박스를 선택 해제하여 선택할 수 있습니다.

타이밍 보기

시간 트랙에서 다음과 같은 중요한 마커를 볼 수 있습니다.

첫 페인트 (FP)
콘텐츠가 포함된 첫 페인트 (FCP)
최대 콘텐츠 페인트 (LCP)
DOMContentLoaded 이벤트 (DCL)
온로드 이벤트 (L)
맞춤 performance.mark() 호출 도움말이 있는 개별 마크가 아래에 813.44ms에 표시되며 Starting to run JavaScript(JavaScript 실행 시작)라는 라벨이 붙어 있습니다.
맞춤 performance.measure() 호출 아래에는 느린 상호작용이라는 노란색 범위가 나와 있습니다.

타이밍 트랙의 마커

마커를 선택하면 요약 탭에서 타임스탬프, 총 시간, 자체 시간, detail 객체 등 자세한 내용을 확인할 수 있습니다.

상호작용 보기

상호작용 트랙에서 사용자 상호작용을 확인하여 잠재적인 응답성 문제를 추적합니다.

상호작용을 보려면 다음 안내를 따르세요.

예를 들어 이 데모 페이지에서 DevTools를 엽니다.
Performance 패널을 열고 녹화를 시작합니다.
요소 (커피)를 클릭하고 기록을 중지합니다.
타임라인에서 상호작용 트랙을 찾습니다.

상호작용 트랙

이 예에서 상호작용 트랙은 포인터 상호작용을 보여줍니다. 상호작용에는 처리 시간 경계에서 입력 및 프레젠테이션 지연을 나타내는 수염이 있습니다. 상호작용 위로 마우스를 가져가면 입력 지연, 처리 시간, 프레젠테이션 지연에 대한 도움말이 표시됩니다.

Interactions 트랙은 또한 200밀리초를 초과하는 상호작용에 관한 Interaction to Next Paint (다음 페인트에 대한 상호작용) 경고를 Summary 탭과 마우스 오버 시 표시되는 도움말에 표시합니다.

INP 경고

Interactions 트랙은 200밀리초 이상의 상호작용을 오른쪽 상단에 빨간색 삼각형으로 표시합니다.

GPU 활동 보기

GPU 섹션에서 GPU 활동을 확인합니다.

GPU 섹션

래스터 활동 보기

Thread Pool 섹션에서 래스터 활동을 확인합니다.

'스레드 풀'의 래스터 활동 섹션으로 이동합니다.

초당 프레임 수 (FPS) 분석

DevTools는 초당 프레임 수를 분석하는 다양한 방법을 제공합니다.

Frames 섹션에서는 특정 프레임에 걸린 시간을 확인합니다.
페이지가 실행될 때 FPS 측정기를 사용하여 FPS의 실시간 추정치를 확인하세요. 초당 프레임 수 보기 측정할 수 있습니다.

프레임 섹션

Frames 섹션은 특정 프레임에 걸린 시간을 정확히 알려줍니다.

프레임 위로 마우스를 가져가면 자세한 정보가 포함된 도움말이 표시됩니다.

프레임 위로 마우스를 가져갑니다.

이 예에서는 프레임 위로 마우스를 가져가면 도움말을 보여줍니다.

Frames 섹션에는 네 가지 유형의 프레임이 표시됩니다.

유휴 프레임 (흰색). 변경사항이 없습니다.
프레임 (녹색). 예상대로 제때 렌더링되었습니다.
부분적으로 표시된 프레임 (노란색에 희소한 넓은 파선 패턴이 있음). Chrome은 최소한 일부 시각적 업데이트를 적시에 렌더링하기 위해 최선을 다했습니다. 예를 들어 렌더기 프로세스의 기본 스레드 작업 (캔버스 애니메이션)은 늦었지만 컴포지터 스레드 (스크롤)는 제때인 경우입니다.
드롭된 프레임 (조밀한 실선 패턴이 있는 빨간색). Chrome에서 적절한 시간 내에 프레임을 렌더링할 수 없습니다.

부분적으로 표시된 프레임 위로 마우스를 가져갑니다.

이 예에서는 부분적으로 표시된 프레임 위로 마우스를 가져가면 도움말을 보여줍니다.

프레임을 클릭하면 요약 탭에서 프레임에 관한 자세한 정보를 볼 수 있습니다. DevTools 선택한 프레임의 윤곽선이 표시됩니다.

Summary(요약) 탭에서 프레임 보기

네트워크 요청 보기

네트워크 섹션을 펼쳐 실적 기록 중에 발생한 네트워크 요청의 폭포식 구조를 확인합니다.

네트워크 트랙에서 선택된 요청(요약 탭이 열려 있음).

네트워크 트랙 이름 옆에는 요청 유형을 색상으로 구분된 범례가 있습니다.

렌더링 차단 요청은 오른쪽 상단에 빨간색 삼각형으로 표시됩니다.

요청에 마우스를 가져가면 다음과 같은 도움말이 표시됩니다.

요청의 URL 및 요청을 실행하는 데 걸린 총 시간.
우선순위 또는 우선순위 변경(예: Medium -> High)
요청이 Render blocking인지 여부입니다.
요청 타이밍의 분류(나중에 설명)

요청을 클릭하면 Network 트랙에서 시작자에서 요청으로 화살표가 그려집니다.

또한 Performance(성능) 패널에는 초기 우선순위 및 (최종) 우선순위 필드를 포함하되 이에 국한되지 않는 요청에 대한 추가 정보가 있는 요약 탭이 표시됩니다. 값이 다른 경우 기록 중에 요청의 가져오기 우선순위가 변경된 것입니다. 자세한 내용은 Fetch Priority API로 리소스 로드 최적화를 참조하세요.

요약 탭에는 요청 타이밍에 대한 분석도 표시됩니다.

요약 탭의 요청 타이밍 분석

www.google.com 요청은 왼쪽에 선 (|–), 중앙에 어두운 부분과 밝은 부분이 있는 막대, 오른쪽에 선 (–|)으로 표시됩니다.

네트워크 탭에서 다른 타이밍 분석을 확인할 수 있습니다. Network 트랙의 요청 또는 Summary 탭의 URL을 마우스 오른쪽 버튼으로 클릭하고 Reveal in Network 패널에서를 클릭합니다. DevTools가 Network 패널로 이동하여 해당 요청을 선택합니다. 시간 탭을 엽니다.

네트워크 패널에 있는 요청의 타이밍 탭.

이 두 분석이 서로 매핑되는 방식은 다음과 같습니다.

왼쪽 줄(|–)은 이벤트 그룹(Connection start 포함)의 모든 내용입니다. 즉, Request Sent 이전의 모든 항목입니다.
막대의 밝은 부분은 Request sent 및 Waiting for server response입니다.
막대의 어두운 부분은 Content download입니다.
오른쪽 줄 (–|)은 기본 스레드를 기다리는 데 소비한 시간입니다. 네트워크 > 시간 탭에 표시되지 않음

메모리 측정항목 보기

마지막 기록의 메모리 측정항목을 보려면 메모리 체크박스를 사용 설정합니다.

메모리 체크박스

DevTools에서 요약 탭 위에 새로운 메모리 차트를 표시합니다. 아래에 새로운 차트도 있습니다. NET 차트에 있는 HEAP 차트를 사용합니다. HEAP 차트는 JSJS와 동일한 정보를 제공합니다. Memory 차트의 힙 줄

메모리 측정항목

이 예에서는 요약 탭 위에 있는 메모리 측정항목을 보여줍니다.

차트의 색상이 지정된 선은 차트 위의 색상이 지정된 체크박스에 매핑됩니다. 체크박스를 사용 중지하여 차트에서 해당 카테고리를 숨깁니다.

차트에는 선택한 기록의 영역만 표시됩니다. 이전 예에서 Memory 차트에는 기록 시작 시점의 메모리 사용량(약 1000ms 표시)만 표시됩니다.

녹음 파일의 일부 길이 보기

네트워크 또는 기본 섹션과 같은 섹션을 분석할 때는 특정 이벤트의 소요 시간을 예로 들 수 있습니다 Shift 키를 누른 상태에서 클릭한 후 왼쪽 또는 오른쪽으로 드래그하여 일부를 선택합니다. 확인할 수 있습니다. 선택 항목 하단에 DevTools에 해당 부분에 걸린 시간이 표시됩니다.

녹화물의 일부분 길이 보기