개발자 도구의 성능 탭 사용해보기

성능 탭

화면단의 개발을 하다보면, 페이지의 동작이 어떠한 순서를 가지고 있는지, 성능이 얼마나 나오는지 확인하고 싶은 경우가 생긴다.
그럴 때는 개발자 도구의 성능 탭을 사용을 하면 되는데, 성능 탭은 자동으로 페이지를 분석하는 것이 아닌, 기록 버튼을 눌러
해당 페이지의 동작을 녹화 한 뒤, 녹화된 내용을 토대로 분석한 기록들이 나오게 됩니다.

F12 를 눌러 개발자 도구를 열고 성능 탭을 누르면, 아래와 같은 화면을 볼 수 있을 것 입니다.

왼쪽 위의 녹화 표시로 되어있는 것을 누르면 페이지의 녹화가 시작되고 거기서 일어난 동작들을 분석(플로우, 렌더링 속도)합니다.
우리가 자주 쓰는 네이버 페이지에서 한 번 해보자. 녹화를 끝내면 아래와 같이 네트워크, 프레임, 기본 등등 해서 분석된 내용이 나오게 된다.

여기서 기본을 보면 해당 함수가 실행되서 얼만큼 걸렸는지 차트로 표현하는 것을 볼 수 있다.
프레임을 보면 현재 프레임이 높은지 낮은지 또한 볼 수 있다. 녹색바가 있는 것이 프레임이 높은것이라고 한다.

이런 식의 성능 탭을 이용해서 개발시 성능을 체크해 볼 수도 있고, 병목 현상이 얼마나 많이 발생했는지도 볼 수 있다.
성능 관련된 이슈를 하게 되면 참고해보자.