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