타임라인 이벤트 모드는 기록을 작성하는 동안 트리거된 모든 이벤트를 표시합니다. 타임라인 이벤트 참조를 사용하여 각 타임라인 이벤트 유형에 관해 자세히 알아보세요.
일반적인 타임라인 이벤트 속성
특정 세부정보는 모든 유형의 이벤트에 나타나고 일부는 특정 이벤트 유형에만 적용됩니다.
이 섹션에는 다양한 이벤트 유형에 공통된 속성이 나열되어 있습니다. 특정 이벤트 유형과 관련된 속성은 다음에 나오는 해당 이벤트 유형의 참조에 나열됩니다.
속성 | 게재 시점 |
---|
집계된 시간 | 중첩된 이벤트가 있는 이벤트의 경우 각 이벤트 카테고리에서 소요된 시간입니다. |
호출 스택 | 하위 이벤트가 있는 이벤트의 경우 각 이벤트 카테고리에서 소요된 시간입니다. |
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 이벤트의 경우 페인트된 영역의 높이와 너비입니다. |