Performance 패널
이번 글에서는 크롬 개발자 도구에서 Performace 패널에 대해서 알아보겠습니다. Performance 패널은 웹 페이지가 로드될 때, 실행되는 모든 작업을 보여줍니다. 특히 브라우저의 메인 스레드에서 실행되는 자바스크립트를 볼 수 있어서, 어떤 코드가 성능상에 문제가 되는지를 확인할 때 사용하기 좋습니다.
Performance 패널으로 이동하여 새로고침 버튼을 누르면 현재 페이지를 새롭게 로딩하면서 그 과정에서의 여러 작업을 기록하게 됩니다.
각 파트에 대해서 알아보겠습니다.
1. CPU 차트, 네트워크 차트, 스크린 샷
최상단에 있는 CPU 차트는 시간에 따라 CPU가 어떤 작업에 리소스를 사용하고 있는지를 비율로 보여 줍니다. 스크립트 실행 작업은 노란색, 렌더링작업은 보라색, 페인팅 작업은 초록색, 기타 작업은 회색으로 표시됩니다. 이 차트를 통해 어느 타이밍에 어떤 작업이 주로 진행되고 있는지 파악 할 수 있습니다. 위에 빨간색 선은 병목 현상을 나타냅니다. 그 아래는 네트워크 차트로, 대략적인 네트워크 상태를 보여줍니다. 위쪽에 진한 막대는 우선순위가 높은 리소스를, 아래 쪽의 옅은 막대는 우선순위가 낮은 네트워크 리소스를 보여줍니다. 그 아래에는 스크린 샷으로, 서비스가 로딩되는 과정을 보여줍니다.
2. Network 타임라인
서비스 로드 과정에서의 네트워크 요청을 시간 순서에 따라 보여줍니다. 각 네트워크 요청 막대에서 의미하는 바는 다음과 같습니다.
- 왼쪽 회색선: 초기 연결 시간
- 막대의 옅은 색 영역: 요청을 보낸 시점부터 응답을 기다리는 시점까지의 시간 (TTFB: Time to First Byte)
- 막대의 짙은 색 영역: 콘텐츠 다운로드 시간
- 오른쪽 회색 선: 해당 요청에 대한 메인 스레드의 작업 시간
3. Main 섹션
브라우저의 메인 스레드에서 실행된느 작업을 플레임 차트(Flame Chart)로 보여 줍니다. X축은 시간의 경과를, Y축은 콜 스택을 의미합니다. 위에 있는 작업이 아래에 있는 작업을 호출했다고 보시면 됩니다.
4. 하단 탭
Summary, Bottom-up, Call tree, Event Log를 확인 할 수 있습니다.
- Summary: 선택 영역에서 발생한 작업 시간의 총합과 각 작업이 차지하는 비중을 보여 줍니다.
- Bottom-up: 가장 최하위에 있는 작업부터 상위 작업까지 역순으로 보여 줍니다.
- Call Tree: Bottom-up과 반대로 가장 상위 작업부터 하위 작업 순으로 작업 내용을 트리뷰로 보여줍니다.
- Event Log: 발생한 이벤트를 보여줍니다.
출처:
- 유동균 - 웹 개발 스킬을 한 단계 높여 주는 프론트엔드 성능 최적화 가이드(인사이트)
- https://developer.chrome.com/docs/devtools/evaluate-performance/?utm_source=devtools
'웹 성능 최적화' 카테고리의 다른 글
| 크롬 개발자 도구(Lighthouse)를 이용하여 페이지 성능 검사하기 (0) | 2023.01.01 |
|---|
