타임라인 이벤트 참조

메긴 키어니
메긴 키어니
플라비오 코페스
플라비오 코페스

타임라인 이벤트 모드는 기록을 작성하는 동안 트리거된 모든 이벤트를 표시합니다. 타임라인 이벤트 참조를 사용하여 각 타임라인 이벤트 유형에 관해 자세히 알아보세요.

일반적인 타임라인 이벤트 속성

특정 세부정보는 모든 유형의 이벤트에 나타나고 일부는 특정 이벤트 유형에만 적용됩니다. 이 섹션에는 다양한 이벤트 유형에 공통된 속성이 나열되어 있습니다. 특정 이벤트 유형과 관련된 속성은 다음에 나오는 해당 이벤트 유형의 참조에 나열됩니다.

속성게재 시점
집계된 시간중첩된 이벤트가 있는 이벤트의 경우 각 이벤트 카테고리에서 소요된 시간입니다.
호출 스택하위 이벤트가 있는 이벤트의 경우 각 이벤트 카테고리에서 소요된 시간입니다.
CPU 시간기록된 이벤트에 소요된 CPU 시간입니다.
세부정보이벤트에 대한 기타 세부정보입니다.
기간 (타임스탬프)모든 하위 요소와 함께 이벤트를 완료하는 데 걸린 시간입니다. 타임스탬프는 녹화가 시작된 시점을 기준으로 이벤트가 발생한 시간입니다.
셀프 타임하위 요소 없이 이벤트에 걸린 시간입니다.
사용된 힙 크기이벤트가 기록되었을 때 애플리케이션에서 사용 중인 메모리 양과 마지막 샘플링 이후 사용된 힙 크기의 델타 (+/-) 변화.

로드 이벤트

이 섹션에는 로딩 카테고리에 속하는 이벤트와 각 이벤트가 나열되어 있습니다.

이벤트설명
HTML 파싱Chrome에서 HTML 파싱 알고리즘을 실행했습니다.
로드 종료네트워크 요청이 완료되었습니다.
데이터 수신요청 데이터가 수신되었습니다. 하나 이상의 데이터 수신 이벤트가 있습니다.
응답 수신요청의 초기 HTTP 응답입니다.
요청 보내기네트워크 요청이 전송되었습니다.

로드 이벤트 속성

속성설명
리소스요청된 리소스의 URL입니다.
미리보기요청된 리소스의 미리보기입니다 (이미지만 해당).
요청 메소드요청에 사용되는 HTTP 메서드입니다 (예: GET 또는 POST).
상태 코드HTTP 응답 코드입니다.
MIME 유형요청된 리소스의 MIME 유형입니다.
인코딩된 데이터 길이요청된 리소스의 길이(바이트)입니다.

스크립팅 이벤트

이 섹션에는 스크립팅 카테고리에 속하는 이벤트와 그 속성이 나열됩니다.

이벤트설명
애니메이션 프레임 실행됨예약된 애니메이션 프레임이 실행되고 콜백 핸들러가 호출됩니다.
애니메이션 프레임 취소예약된 애니메이션 프레임이 취소되었습니다.
GC 이벤트가비지 컬렉션이 발생했습니다.
DOMContentLoaded브라우저에서 DOMContentLoaded를 실행했습니다. 이 이벤트는 페이지의 모든 DOM 콘텐츠가 로드되고 파싱되면 시작됩니다.
스크립트 평가스크립트가 평가되었습니다.
이벤트자바스크립트 이벤트(예: 'mousedown' 또는 'key')
함수 호출최상위 자바스크립트 함수가 호출되었습니다 (브라우저가 자바스크립트 엔진으로 전환될 때만 표시됨).
타이머 설치setInterval() 또는 setTimeout()으로 타이머가 생성되었습니다.
애니메이션 프레임 요청requestAnimationFrame() 호출에서 새 프레임을 예약했습니다.
타이머 삭제이전에 생성된 타이머가 삭제되었습니다.
시간console.time()이라는 스크립트
시간 종료console.timeEnd()라는 스크립트
타이머 실행됨setInterval() 또는 setTimeout()로 예약된 타이머가 실행되었습니다.
XHR 준비 상태 변경XMLHTTPRequest의 준비 상태가 변경되었습니다.
XHR 로드XMLHTTPRequest 로드가 완료되었습니다.

스크립팅 이벤트 속성

속성설명
타이머 ID타이머 ID입니다.
시간 초과타이머에서 지정한 제한시간입니다.
반복 빈도타이머의 반복 여부를 지정하는 부울입니다.
함수 호출호출된 함수입니다.

렌더링 이벤트

이 섹션에는 렌더링 카테고리에 속하는 이벤트와 해당 속성이 나열됩니다.

이벤트설명
레이아웃 무효화DOM 변경으로 페이지 레이아웃이 무효화되었습니다.
레이아웃페이지 레이아웃이 실행되었습니다.
스타일 다시 계산Chrome에서 요소 스타일을 다시 계산했습니다.
스크롤중첩 뷰의 콘텐츠가 스크롤되었습니다.

이벤트 속성 렌더링

속성설명
레이아웃이 무효화됨레이아웃 레코드의 경우 레이아웃이 무효화된 코드의 스택 트레이스입니다.
레이아웃이 필요한 노드레이아웃 기록의 경우 재레이아웃이 시작되기 전에 레이아웃이 필요한 것으로 표시된 노드 수입니다. 이는 일반적으로 개발자 코드에 의해 무효화된 노드와 재배치 루트로 향하는 상위 경로입니다.
레이아웃 트리 크기레이아웃 레코드의 경우 재레이아웃 루트 아래에 있는 총 노드 수입니다 (Chrome이 재레이아웃을 시작하는 노드).
레이아웃 범위가능한 값은 'Partial' (재레이아웃 경계는 DOM의 일부임) 또는 'Whole 문서'입니다.
영향을 받는 요소스타일 레코드의 경우 스타일 재계산에 영향을 받은 요소의 수입니다.
무효화된 스타일스타일 레코드의 경우 스타일 무효화를 일으킨 코드의 스택 트레이스를 제공합니다.

페인팅 이벤트

이 섹션에는 페인팅(Painting) 범주에 속하는 이벤트와 그 속성이 나열됩니다.

이벤트설명
복합 레이어Chrome의 렌더링 엔진이 합성한 이미지 레이어입니다.
이미지 디코딩이미지 리소스가 디코딩되었습니다.
이미지 크기 조절이미지 크기가 기본 크기에서 조절되었습니다.
페인트복합 레이어는 디스플레이 영역에 페인트되었습니다. Paint 기록 위로 마우스를 가져가면 업데이트된 디스플레이 영역이 강조표시됩니다.

페인팅 이벤트 속성

속성설명
위치Paint 이벤트의 경우 페인트 직사각형의 x 및 y 좌표
크기Paint 이벤트의 경우 페인트된 영역의 높이와 너비입니다.