구글 chrome에서 F12를 눌러보면, 다양한 개발자 도굴를 제공합니다.
오늘 소개해드릴 개발자 도구는 timeline입니다.
timeline은 현재 페이지에서 일어나는 내부 동작들을 1ms단위로 측정하여 보여줍니다.
(출처 https://developers.google.com/)
프레임 수, cpu점유율, 리소스 요청, 회수시간을 1ms단위로 볼 수 있을 뿐만아니라, 각 과정에서 일어나는 작업들을 시각화 하여 보여줍니다.
자세한 설명은 google에서 한글로 제공합니다.(url)
분석해보기
이 timeline은 퍼포먼스를 향상시키는데 사용하거나, 버그를 찾는데 사용됩니다.
페이지에서 렉이 걸리는데, 어느 부분 어느 동작을 할때 시간이 소요되는지 알고 싶을때 timeline이 많은 도움이 됩니다.
진행중인 프로젝트에서 렉이 걸려 timeline을 통해 분석을 해보았습니다.
그래프에서 프레임이 급격히 떨어지고, cpu점유율이 증가하는 부분을 찾아 그 순간에 어떤 일들이 일어나는지 알아보았습니다.
좌측 하단에 그래프를 보면, scripting의 양이 대부분임을 알 수 있습니다. 좀더 정확한 분석을 위해서는 다른 탭을 살펴보아야 합니다.
위의 사진은 렉이 걸리는 순간의 함수호출 트리입니다.
scripting에 42ms이상이 걸립니다. 트리를 쭉 타고 가보면, 더 자세히 볼 수 있습니다.
아마 socket 부분에서 많은 연산이 있는 것 으로 보여집니다.
SelfTime vs TotalTime
소요시간에는 SelfTime과 TotalTime이 있는것을 볼 수 있습니다.
SelfTIme은 다른 children없이 오직 이 작업을 하는데 소요되는 시간이고, TotalTime은 이 작업을 하는데 소요된 총 시간을 의미합니다.
위의 사진을 보시면, selfTime과 totalTime의 차이를 이해 하실수 있을 것입니다.
막대 그래프를 보시면, 같은 시간비용을 가진 이벤트들이 연속되어 이어집니다. 이들은 모두 SelfTime이 0이 됩니다.
즉 그 이벤트는 100% children에서 이루어 진다는 말입니다. 그래서 이 차이를 염두에 두시고 분석할 필요가 있습니다.
위의 사진은 밑에 children 이벤트가 없는 이벤트 들을 선택한 모습입니다.
children 이벤트가 없는 이벤트가 실질적으로 실행시간을 차지하는 범인이라고 생각하시면 됩니다.
Profile Chart Color
참고로 막대그라프라고 부르던 것을 profile chart라고 합니다.
profile chart에서 각각의 이벤트가 다른 색갈을 가지고 있는것을 볼 수 있습니다.
사실 이것은 아무런 의미가 없고, 단순이 가독성을 위한 random color라고 합니다. (stackOverFlow)
timeline 분석에 대해 잘 설명해 놓은 글이있어 소개합니다.
http://blog.librato.com/posts/chrome-devtools