2.크롬 개발자 도구를 사용해보자 - Performance 탭

프론트 엔드 개발을 하기 위해서는 크롬 개발자 도구를 잘 활용해야 한다고 생각한다..

지금의 나는 크롬 개발자 도구를 얼마나 활용하면서 개발을 했을까? 생각해 봤더니 Elements, Console, Sources, Application 탭 정도만 사용하더라...(이마저도 100%활용하진 못한다.)

 그래서 이제부터는 사이트의 최적화를 위해서 중요한 Network, Performance, Audits등의 나머지 탭들에 대해서도 공부를 해야겠다고 다짐했다.

 먼저 Performance 탭이다. (한번에 모든 것을 공부할 수가 없어서 차차 수정을 할 예정)

1.측정방법

 -측정할 액션이나 페이지 로딩 전 레코딩 버튼을 누르고 원하는 결과물이 나오면 레코딩 stop을 한다.

2.결과 분석

 -내가 측정할 페이지에서 동작하는 모든 것(FPS,CPU,NET불러오는 파일들의 네트워크 시간,)을 타임라인으로 보여준다.

  ex)

 - FPS,CPU,NET까지를 오버뷰라고 하고 그밑에 디테일한 내용을 볼 수 있는 부분이 플레임 차트(Flame Chart)라고 한다. 그리고 제일 밑에 Summary가 있는 부분을 디테일 뷰라고 한다. 

 -기본 측정 기준은 초당 프레임수(FPS)이다.(모든 애니메이션은 60FPS이면 사용자가 만족한다.)

 -FPS 차트를 보면 빨간색 막대가 길게 있는데 이것은 프레인의 속도가 너무 낮아져 퍼포먼스가 떨어진다는 의미다, 그밑에 있는 초록색 막대가 지금은 바닥에 거의 붙어있는데 이게 위로 올라와야 퍼포먼스가 올라간다.

 -FPS 차트 밑에 CPU 차트가 있다. CPU차트가 여러가지 색깔로 알록달록하게 차 있으면 CPU가 최대로 사용되었다는 의미이다. 그리고 제일 밑에 Summary 탭에 상세 내용이 나온다. 

 - 병목 현상 찾기 : Summary에서 전체에 대한 비율을 보고 어떤 작업에서 비율이 높은지 확인해야한다. 지금 예시로 든 페이지에서는 Rendering이 가장 높기 때문에 Rendering을 줄이는 것을  목표로 해야한다.

 - 플레임 차트에서 Main섹션을 보면 Javascript가 노란색이고 Rendering(=레이아웃)이 보라색, Painting이 초록색인데 각 작업에 빨간색 삼각형이 표시되어 있으면 문제가 있는 이벤트이다.

 - 문제가 있는 이벤트를 누르면 디테일 뷰에 해당 이벤트가 발생한 소스코드의 관련 줄이 링크된다.

 - Rendering 이벤트를 누르면 대부분 강제 리플로우된 것에 대한 경고가 있다.

 Tip. 리플로우는 엘리먼트의 사이즈나 위치 등이 변경될 때 발생하는 작업이다. 렌더링은 자바스크립트 이벤트 동작 중 원인이 되는 코드 라인이 1개가 아니라 1000개가 되어도 첫 번째 코드에 의해 한번만 발생하기 때문에 First layout Invalidation으로 첫번째가 제공되며 Layout Forced는 레이아웃 이벤트가 Javascript 이벤트 이후에 발생한 것이 아니라 중간에 발생된 곳을 의미한다.(원래는 Javascript 이벤트가 끝나고 레이아웃 이벤트가 발생되어야 이상적이다.)

 한마디로 자바스크립트 이벤트에서 반복적으로 레이아웃을 설정하는 작업인 경우 레이아웃 설정을 한번에 모아서 해주는게 이상적이다.

참고

1.http://shiren.github.io/2016-11-15-%ED%81%AC%EB%A1%AC%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%84%B1%EB%8A%A5%EC%B8%A1%EC%A0%95/

2.https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/