DevTools 타임라인 패널은 항상 성능 최적화 여정을 향한 최고의 첫걸음입니다. 이 중앙 집중식 앱 활동 개요는 로드, 스크립팅, 렌더링, 페인팅에 시간이 소요되는 부분을 분석하는 데 도움이 됩니다. 최근 Google은 개발자가 앱의 실적을 더 자세히 확인할 수 있도록 타임라인을 더욱 다양한 계측으로 업그레이드했습니다.
다음과 같은 기능이 추가되었습니다.
- 통합된 자바스크립트 프로파일러가 될 수 있습니다. (Flame Chart 포함)
- 프레임 뷰어를 사용하여 합성 레이어를 시각화해 보세요.
- 페인트 프로파일러를 사용하면 브라우저의 페인팅 활동을 자세히 드릴다운할 수 있습니다.
이 문서에서 설명하는 Paint 캡처 옵션을 사용하면 성능 오버헤드가 발생하므로 원할 때만 켜야 합니다.
통합 자바스크립트 프로파일러
Profiles 패널을 살펴본 적이 있다면 JavaScript CPU 프로파일러에 익숙하실 것입니다. 이 도구는 JavaScript 함수에서 실행 시간이 소비되는 위치를 측정합니다. Flame Chart로 자바스크립트 프로필을 확인하면 시간 경과에 따른 자바스크립트 처리 과정을 시각화할 수 있습니다.
이제 타임라인 패널에서 JavaScript 실행의 상세한 분석을 확인할 수 있습니다. JS 프로파일러 캡처 옵션을 선택하면 다른 브라우저 이벤트와 함께 타임라인에서 자바스크립트 호출 스택을 볼 수 있습니다. 이 기능을 타임라인에 추가하면 디버깅 워크플로를 간소화할 수 있습니다. 뿐만 아니라, JavaScript를 컨텍스트에 따라 확인하여 페이지 로드 시간과 렌더링에 영향을 미치는 코드 부분을 식별할 수 있습니다.
자바스크립트 프로파일러 외에도 Flame Chart 뷰가 타임라인 패널에 통합되었습니다. 이제 앱의 활동을 이벤트의 기본 폭포식 구조 또는 Flame Chart로 볼 수 있습니다. Flame Chart 아이콘을 사용하면 두 보기 간에 전환할 수 있습니다.
프레임 뷰어
레이어 합성의 기법은 개발자에게 대부분 숨겨져 있었던 브라우저의 또 다른 측면입니다. 레이어를 드물게 그리고 주의해서 사용하면, 비용이 많이 드는 다시 페인트를 피하고 성능을 크게 향상할 수 있습니다. 하지만 브라우저에서 콘텐츠를 어떻게 합성할지 예측하기가 쉽지 않은 경우도 많습니다. 타임라인의 새로운 Paint 캡처 옵션을 사용하면 기록의 각 프레임에서 합성된 레이어를 시각화할 수 있습니다.
기본 스레드 위에 있는 회색 프레임 막대를 선택하면 레이어 패널에 앱을 구성하는 레이어의 시각적 모델이 표시됩니다.
레이어 모델을 확대/축소, 회전, 드래그하여 콘텐츠를 탐색할 수 있습니다. 레이어 위로 마우스를 가져가면 페이지에서 레이어의 현재 위치가 표시됩니다. 레이어를 마우스 오른쪽 버튼으로 클릭하면 요소 패널의 해당 노드로 이동할 수 있습니다. 이러한 지형지물은 레이어로 승격된 항목을 보여줍니다. 레이어를 선택한 경우 컴포지션 이유 행에서 레이어가 승격된 이유를 확인할 수도 있습니다.
페인트 프로파일러
마지막으로, 비용이 많이 드는 페인트로 인한 버벅거림을 식별하는 데 도움이 되도록 페인트 프로파일러를 추가했습니다. 이 기능은 페인트 이벤트 중에 Chrome이 수행하는 작업에 관한 세부정보를 추가하여 타임라인을 강화합니다.
먼저 각 페인트 이벤트에 상응하는 시각적 콘텐츠를 더 쉽게 식별할 수 있습니다. 타임라인에서 녹색 페인트 이벤트를 선택하면 세부정보 창에 페인트된 실제 픽셀의 미리보기가 표시됩니다.
자세히 알아보려면 Paint Profiler 창으로 전환하세요. 이 프로파일러는 브라우저가 선택한 페인트에 대해 실행한 정확한 그리기 명령어를 보여줍니다. 이러한 네이티브 명령어를 앱의 실제 콘텐츠와 연결할 수 있도록 draw* 호출을 마우스 오른쪽 버튼으로 클릭하고 Elements 패널에서 해당하는 노드로 바로 이동할 수 있습니다.
창 상단의 미니 타임라인을 사용하면 페인팅 프로세스를 재생하여 브라우저에서 실행하는 데 많은 비용이 드는 작업을 파악할 수 있습니다. 그리기 작업은 분홍색 (도형), 파란색 (비트맵), 녹색 (텍스트) 및 보라색 (기타)과 같이 색상으로 구분됩니다. 막대 높이는 콜 시간을 나타내므로 긴 막대를 조사하면 특정 페인트에 어떤 비용이 많이 들었는지 파악할 수 있습니다.
프로필과 수익을 창출하세요!
성능 최적화에 관해서, 브라우저에 대한 지식은 놀라울 정도로 강력할 수 있습니다. 타임라인 업데이트를 통해 코드를 살짝 엿볼 수 있어 코드와 Chrome의 렌더링 프로세스 간의 관계를 명확히 하는 데 도움이 됩니다. 타임라인에서 이 새로운 옵션을 사용해 보고 Chrome DevTools를 통해 버벅거림 현상 워크플로를 개선할 수 있는 방법을 알아보세요.