크롬 개발자 도구 perfomance탭 알아보기
크롬의 개발자도구의 성능분석 탭을 사용해보자.
다음 문서의 예시를 따라 진행하였다.
동작원리
성능 분석은 웹페이지를 녹화하고 분석하는 방식으로 진행된다.
시작하기
성능(Perfomance)탭은 크롬 개발자도구에 있다.
다음과 같은 순서로 시작할 수 있다.
- 개발자 도구를 열고 perfomance탭에 들어간다.
예제를 신행하고 싶을 경우 다음 링크를 시크릿 모드에서 연다. 크롬 익스텐션이 성능 측정에 노이즈를 발생시킬 수 있기 때문이다.
시작한다.
- 초기 랜더링부터 분석 하고싶은 경우 새로고침 버튼을 누르면 된다.
- 혹은 성능을 분석하고 싶은 시점 전에 녹화버튼을 누르면 된다.
- stop버튼을 눌러 녹화를 중지할 수 있다.
- 너무 길게 녹화할 필요 없이 3~4초 정도 녹화하면 된다.
모바일 CPU 시뮬레이션
모바일 기기는 데스크탑이나 노트북에 비해 CPU의 성능이 좋지않다.
CPU의 성능을 일부러 저하시켜 모바일 환경에서의 시뮬레이션을 할 수 있다.
- 성능 탭에서 스크린샷(screenshot)이 활성되어있는지 확인한다.
- 캡쳐 설정(톱니바퀴)를 클릭한다.
- 아래의 CPU제한없음에서 CPU에 제한을 준다.
예시에선 2배 제한을 줬지만 예전 아티클인지 4배 8배만 남아있어서 4배 제한을 주었다.
결과 분석
위의 시작하기에서 얻은 결과를 분석해보자.
초당 프레임 분석
애니메이션의 성능을 측정하는 주요 지표는 초당 프레임수(FPS)이다.
사용자들은 애니메이션이 60 FPS로 실행될 때 행복하다.
FPS 차트
빨간색 막대를 볼 때마다 Framerate가 저하된다는 의미이다.
녹색 막대가 높을수록 FPS가 높다.
CPU 차트
CPU 차트의 색상은 그림에서 아래의 요약탭의 색상과 일치한다.
색칠이 되어있을 수록 CPU를 사용했다는 의미이다.
장시간 색칠되어있을 경우 최적화가 필요하다는 의미이다.
FPS,CPU 차트 위에 마우스를 올리면 해당 시점의 스크린샷을 보여준다.
프레임
마우스를 올리면 특정 프레임에 대한 FPS를 보여준다.
위 사진과 Frame 영역의 색이 다른 건 사각형 수를 조절했기 때문이다.- 실시간 FPS 추정치
ctrl+shift+p를 누르고 FPS 추정치를 확인할 수 있다.
다음과 같이 실시간으로 FPS 추정치를 보여준다.
- 실시간 FPS 추정치
병목 현상 찾기
요약 탭
- 선택한 이벤트가 없는 경우 활동 내역을 보여준다.
- 사각형 수가 없는 경우
유휴상태가 많고 작업이 여유로움을 알 수 있다.
- 사각형 수가 많은 경우
사각형 수가 늘어날 수록 랜더링에 대부분의 시간이 쓰이는 것을 알 수 있다.
- 사각형 수가 많은 경우+ 최적화
여전히 랜더링에 대부분의 시간이 쓰이지만
애니메이션을 담당하는 스크립트에서 작업시간을 줄였음을 알 수 있다.
기본 탭
특정 프레임을 클릭하고 기본탭을 열어 시간 경과에 따른 메인스레드의 활동도를 볼 수 있다.
각 막대는 이벤트이며 막대의 길이가 길 수록 오래 걸렸다는 것을 의미한다.
또한 막대가 쌓인 것은 아래의 이벤트가 위의 이벤트를 발생 시켰다는 의미이다.
또한 이벤트를 클릭하여 단일 이벤트에 대한 정보를 확인할 수도 있다.
호출 스택을 통해 이벤트를 발생시킨 소스코드 또한 확인할 수 있다.
