DevTools 타임라인 - 전체 스토리 제공

Heather Mahan

DevTools 타임라인 패널은 항상 성능 최적화의 첫 번째 단계로 가장 적합했습니다. 앱 활동에 대한 중앙 집중식 개요를 통해 로드, 스크립팅, 렌더링, 페인팅에 시간이 얼마나 소요되는지 분석할 수 있습니다. 최근에는 앱 실적을 더 심층적으로 확인할 수 있도록 더 많은 계측 기능을 추가하여 타임라인을 업그레이드했습니다.

다음과 같은 기능이 추가되었습니다.

• 통합된 JavaScript 프로파일러를 사용합니다. (Flame 차트 포함)
• 합성된 레이어를 시각화하는 데 도움이 되는 프레임 뷰어
• 브라우저의 페인팅 활동을 자세히 드릴다운할 수 있는 페인트 프로파일러

이 도움말에 설명된 Paint 캡처 옵션을 사용하면 성능 오버헤드가 발생하므로 필요한 경우에만 사용 설정하세요.

통합 JavaScript 프로파일러

프로필 패널을 살펴본 적이 있다면 JavaScript CPU 프로파일러에 익숙할 것입니다. 이 도구는 JavaScript 함수에서 실행 시간이 어디에서 사용되었는지 측정합니다. Flame Chart로 JavaScript 프로필을 확인하면 시간 경과에 따른 JavaScript 처리를 시각화할 수 있습니다.

이제 타임라인 패널에서 JavaScript 실행을 세부적으로 분석할 수 있습니다. JS 프로파일러 캡처 옵션을 선택하면 타임라인에서 JavaScript 호출 스택을 다른 브라우저 이벤트와 함께 볼 수 있습니다. 이 기능을 타임라인에 추가하면 디버깅 워크플로를 간소화할 수 있습니다. 그뿐만 아니라 컨텍스트에서 JavaScript를 확인하고 페이지 로드 시간과 렌더링에 영향을 미치는 코드 부분을 식별할 수 있습니다.

JavaScript 프로파일러 외에도 플레임 차트 보기가 타임라인 패널에 통합되었습니다. 이제 앱 활동을 기존 이벤트 폭포식 구조 또는 플레임 차트로 볼 수 있습니다. 플레임 차트 아이콘을 사용하면 이러한 두 뷰 간에 전환할 수 있습니다.

JS Profiler 캡처 옵션과 Flame 그래프 뷰를 사용하여 타임라인의 호출 스택을 조사합니다.

참고: WASD 키를 사용하여 플레임 차트를 확대/축소하고 화면 이동합니다. Shift 키를 누른 채 드래그하여 선택 상자를 그립니다.

프레임 뷰어

레이어 합성은 브라우저의 또 다른 측면으로, 대부분 개발자에게는 숨겨져 있습니다. 레이어를 적절하게 사용하면 비용이 많이 드는 다시 그리기를 방지하고 성능을 크게 향상할 수 있습니다. 하지만 브라우저가 콘텐츠를 컴포지션하는 방식을 예측하기란 쉽지 않습니다. 타임라인의 새로운 페인트 캡처 옵션을 사용하면 녹화의 각 프레임에서 합성된 레이어를 시각화할 수 있습니다.

기본 스레드 위의 회색 프레임 막대를 선택하면 레이어 패널에 앱을 구성하는 레이어의 시각적 모델이 표시됩니다.

참고: 타임라인 녹화에서 프레임 막대를 클릭하여 애니메이션을 재생합니다.

레이어 모델을 확대/축소, 회전, 드래그하여 콘텐츠를 탐색할 수 있습니다. 레이어 위로 마우스를 가져가면 페이지에서 레이어의 현재 위치가 표시됩니다. 레이어를 마우스 오른쪽 버튼으로 클릭하면 요소 패널에서 상응하는 노드로 이동할 수 있습니다. 이 기능은 레이어로 승격된 항목을 보여줍니다. 레이어를 선택하면 조합 이유라는 라벨이 지정된 행에서 레이어가 승격된 이유도 확인할 수 있습니다.

Codrops의 Scattered Polaroids Gallery에서 레이어를 검사하여 브라우저의 합성 이유를 확인합니다.

페인트 프로파일러

마지막으로 비용이 많이 드는 페인트로 인한 버벅거림을 식별하는 데 도움이 되는 페인트 프로파일러가 추가되었습니다. 이 기능은 페인트 이벤트 중에 Chrome에서 실행하는 작업에 관한 세부정보를 타임라인에 추가하여 타임라인을 보강합니다.

먼저 이제 각 페인트 이벤트에 해당하는 시각적 콘텐츠를 더 쉽게 식별할 수 있습니다. 타임라인에서 녹색 페인트 이벤트를 선택하면 세부정보 창에 페인트된 실제 픽셀의 미리보기가 표시됩니다.

브라우저가 페인트 캡처 옵션을 사용하여 그린 픽셀을 미리 봅니다.

자세히 살펴보려면 페인트 프로파일러 창으로 전환하세요. 이 프로파일러는 브라우저가 선택한 페인트용으로 실행한 정확한 그리기 명령어를 보여줍니다. 이러한 네이티브 명령어를 앱의 실제 콘텐츠와 연결하는 데 도움이 되도록 draw* 호출을 마우스 오른쪽 버튼으로 클릭하고 요소 패널에서 해당 노드로 바로 이동할 수 있습니다.

Paint Profiler를 사용하여 네이티브 브라우저 draw 호출을 DOM 요소에 연결합니다.

창 상단의 미니 타임라인을 사용하면 페인팅 프로세스를 재생하고 브라우저에서 실행하는 데 비용이 많이 드는 작업을 파악할 수 있습니다. 그리기 작업은 다음과 같이 색상으로 구분됩니다. 분홍색 (도형), 파란색 (비트맵), 녹색 (텍스트), 보라색 (기타). 막대 높이는 통화 시간을 나타내므로 긴 막대를 조사하면 특정 페인트에서 비용이 많이 드는 부분을 파악하는 데 도움이 됩니다.

프로필과 수익

성능 최적화의 경우 브라우저에 대한 지식이 매우 유용할 수 있습니다. 이러한 타임라인 업데이트를 통해 내부 작동 방식을 살펴볼 수 있으므로 코드와 Chrome의 렌더링 프로세스 간의 관계를 명확히 파악할 수 있습니다. 타임라인에서 이러한 새로운 옵션을 사용해 보고 Chrome DevTools에서 어떻게 버벅거림을 찾는 워크플로를 개선할 수 있는지 알아보세요.