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

헤더 마한

DevTools 타임라인 패널은 항상 성능 최적화 여정을 향한 최고의 첫걸음입니다. 이 중앙 집중식 앱 활동 개요는 로드, 스크립팅, 렌더링, 페인팅에 시간이 소요되는 부분을 분석하는 데 도움이 됩니다. 최근 Google은 개발자가 앱의 실적을 더 자세히 확인할 수 있도록 타임라인을 더욱 다양한 계측으로 업그레이드했습니다.

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

이 문서에서 설명하는 Paint 캡처 옵션을 사용하면 성능 오버헤드가 발생하므로 원할 때만 켜야 합니다.

통합 자바스크립트 프로파일러

Profiles 패널을 살펴본 적이 있다면 JavaScript CPU 프로파일러에 익숙하실 것입니다. 이 도구는 JavaScript 함수에서 실행 시간이 소비되는 위치를 측정합니다. Flame Chart로 자바스크립트 프로필을 확인하면 시간 경과에 따른 자바스크립트 처리 과정을 시각화할 수 있습니다.

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

자바스크립트 프로파일러 외에도 Flame Chart 뷰가 타임라인 패널에 통합되었습니다. 이제 앱의 활동을 이벤트의 기본 폭포식 구조 또는 Flame Chart로 볼 수 있습니다. Flame Chart 아이콘을 사용하면 두 보기 간에 전환할 수 있습니다.

불꽃 아이콘
JS 프로파일러 캡처 옵션과 Flame Chart 뷰를 사용하여 타임라인의 호출 스택 조사
JS 프로파일러 캡처 옵션과 Flame Chart 뷰를 사용하여 타임라인의 호출 스택 조사

프레임 뷰어

레이어 합성의 기법은 개발자에게 대부분 숨겨져 있었던 브라우저의 또 다른 측면입니다. 레이어를 드물게 그리고 주의해서 사용하면, 비용이 많이 드는 다시 페인트를 피하고 성능을 크게 향상할 수 있습니다. 하지만 브라우저에서 콘텐츠를 어떻게 합성할지 예측하기가 쉽지 않은 경우도 많습니다. 타임라인의 새로운 Paint 캡처 옵션을 사용하면 기록의 각 프레임에서 합성된 레이어를 시각화할 수 있습니다.

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

레이어 모델을 확대/축소, 회전, 드래그하여 콘텐츠를 탐색할 수 있습니다. 레이어 위로 마우스를 가져가면 페이지에서 레이어의 현재 위치가 표시됩니다. 레이어를 마우스 오른쪽 버튼으로 클릭하면 요소 패널의 해당 노드로 이동할 수 있습니다. 이러한 지형지물은 레이어로 승격된 항목을 보여줍니다. 레이어를 선택한 경우 컴포지션 이유 행에서 레이어가 승격된 이유를 확인할 수도 있습니다.

Codrops의 Scattered 폴라로이드 갤러리에서 레이어를 검사하여 브라우저가 합성하는 이유를 알아냅니다.
Codrops의 분산형 폴라로이드 갤러리에서 레이어를 검사하여 브라우저의 합성 이유를 확인

페인트 프로파일러

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

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

페인트 캡처 옵션을 사용하여 브라우저가 그린 픽셀 미리보기
Paint 캡처 옵션을 사용하여 브라우저가 그린 픽셀 미리보기

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

페인트 프로파일러를 사용하여 네이티브 브라우저 그리기 호출을 DOM 요소와 연결합니다.
페인트 프로파일러를 사용하여 네이티브 브라우저 그리기 호출을 DOM 요소와 연결

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

프로필과 수익을 창출하세요!

성능 최적화에 관해서, 브라우저에 대한 지식은 놀라울 정도로 강력할 수 있습니다. 타임라인 업데이트를 통해 코드를 살짝 엿볼 수 있어 코드와 Chrome의 렌더링 프로세스 간의 관계를 명확히 하는 데 도움이 됩니다. 타임라인에서 이 새로운 옵션을 사용해 보고 Chrome DevTools를 통해 버벅거림 현상 워크플로를 개선할 수 있는 방법을 알아보세요.