Network 타임라인
막대를 보는 법에 대해 알아보겠습니다.
왼쪽 회색 선: 연결 시간
막대 옅은 부분: 요청 > 응답 기다리는 시간
막대 짙은 부분: 콘텐츠 다운로드 시간
오른쪽 회색 선: 요청에 대한 메인 스레드 작업 시간Frames, Timings, Main
Frames: 화면에 변화가 있을 때마다의 스크린 샷
Timings: User Timing API를 통해 기록된 정보 (이미지는 리액트의 컴포넌트 렌더링 시간을 측정한 것)
참고: React의 17버전 이후 User TIming API 지원 종료되어 이전 버전만 확인 가능
Main: 브라우저 메인 스레드에서 실행되는 작업을 Flame차트로 표현 (오래 걸리는 작업 파악 가능)
Flame차트는 소프트웨어 스택을 쉽게 추적하기우해 개발된 계층형 데이터 시각화 기법이라고 해요. x축은 시간, y축은 스택의 깊이를 표현해요. 막대의 위는 상위작업, 아래는 하위작업 크롬의 개발자 도구에서는 위에서부터 아래로 그려집니다.
Summary, Bottom-Up, Event Log
Summary: 선택한 영역에서 발생한 작업 시간의 합, 그리고 작업의 비율을 확인
Bottom-Up: 하위 -> 상위 작업의 순서로 tree view로 확인
Event Log: 발생한 이벤트를 확인(Loading, Scripting, Rendering, Painting)
devLog