이제 Chrome 카나리아에서 페인트 프로파일링을 위한 연속 페인팅 모드를 사용할 수 있습니다. 이 도움말에서는 페이지 페인팅 시간의 문제를 식별하는 방법과 이 새 도구를 사용하여 페인팅 성능의 병목 현상을 감지하는 방법을 설명합니다.
페이지의 페인팅 시간 조사
따라서 페이지가 원활하게 스크롤되지 않는 것으로 확인되었습니다. 다음은 문제를 해결하기 시작하는 방법입니다. 이 예에서는 댄 세더홀름의 데모 페이지 Things We Left On The Moon을 사용합니다.
웹 인스펙터를 열고 타임라인 녹화를 시작하고 페이지를 위아래로 스크롤합니다. 그런 다음 각 프레임에서 어떤 일이 일어났는지 보여주는 세로 타임라인을 살펴봅니다.
페인팅에 대부분의 시간이 소요되는 경우 (60fps 위의 큰 녹색 막대) 그 이유를 자세히 살펴봐야 합니다. 페인트를 조사하려면 웹 인스펙터 (웹 인스펙터의 오른쪽 하단에 있는 톱니바퀴 아이콘)의 페인트 직사각형 표시 설정을 사용하세요. 그러면 Chrome에서 페인트하는 영역이 표시됩니다.
Chrome에서 페이지의 영역을 다시 그리는 데는 여러 가지 이유가 있습니다.
- JavaScript에서 DOM 노드가 변경되어 Chrome에서 페이지 레이아웃을 다시 계산합니다.
- 프레임 기반 주기로 업데이트되는 애니메이션이 재생 중입니다.
- 마우스 오버와 같은 사용자 상호작용으로 인해 특정 요소의 스타일이 변경됩니다.
- 페이지 레이아웃이 변경되는 다른 모든 작업
개발자는 페이지에서 발생하는 다시 칠하기를 인식해야 합니다.
페인트 직사각형을 살펴보는 것이 좋습니다. 위의 예시 스크린샷을 보면 전체 화면이 큰 페인트 직사각형으로 덮여 있는 것을 볼 수 있습니다. 즉, 스크롤할 때 전체 화면이 다시 그려지므로 좋지 않습니다. 이 경우 CSS 스타일 background-attachment:fixed로 인해 페이지의 배경 이미지가 같은 위치에 유지되고 스크롤할 때 페이지의 콘텐츠가 배경 이미지 위로 이동합니다.
재색칠이 넓은 영역을 차지하거나 시간이 오래 걸리는 것으로 확인되면 다음 두 가지 옵션이 있습니다.
- 페이지 레이아웃을 변경하여 페인팅의 양을 줄일 수 있습니다. 가능한 경우 Chrome은 표시된 페이지를 한 번만 그리고 아래로 스크롤할 때 표시되지 않은 부분을 추가합니다. 하지만 Chrome에서 특정 영역을 다시 칠해야 하는 경우도 있습니다. 예를 들어 동일한 위치에 유지되는 탐색 요소에 자주 사용되는 CSS 규칙
position:fixed는 이러한 다시 칠하기를 일으킬 수 있습니다. - 페이지 레이아웃을 유지하려면 다시 칠해지는 영역의 페인팅 비용을 줄여 보세요. 모든 CSS 스타일의 페인팅 비용이 동일한 것은 아닙니다. 일부 스타일은 영향을 거의 미치지 않는 반면 다른 스타일은 영향을 많이 미칩니다. 특정 스타일의 페인트 비용을 알아내는 데는 많은 노력이 필요할 수 있습니다. 이렇게 하려면 요소 패널에서 스타일을 전환하고 타임라인 녹화의 차이를 확인하면 됩니다. 즉, 패널 간에 전환하고 여러 녹화를 실행합니다. 이때 연속 페인팅 모드가 사용됩니다.
연속 페인팅 모드
연속 페인팅 모드는 페이지에서 비용이 많이 드는 요소를 식별하는 데 도움이 되는 도구입니다. 페이지를 항상 다시 칠하는 상태로 전환하여 진행 중인 페인팅 작업의 카운터를 표시합니다. 그런 다음 요소를 숨기고 스타일을 변경하면서 카운터를 관찰하여 느린 부분을 파악할 수 있습니다.
설정
연속 페인팅 모드를 사용하려면 Chrome Canary를 사용해야 합니다.
Linux 시스템 (및 일부 Mac)에서는 Chrome이 컴포지팅 모드로 실행되는지 확인해야 합니다. about:flags의 모든 페이지에서 GPU 합성 설정을 사용하여 영구적으로 사용 설정할 수 있습니다.
시작 방법
연속 페인팅 모드는 웹 인스펙터 설정 (웹 인스펙터의 오른쪽 하단에 있는 톱니바퀴 아이콘)에서 연속 페이지 다시 칠하기 사용 설정 체크박스를 통해 사용 설정할 수 있습니다.
오른쪽 상단의 작은 디스플레이에는 측정된 페인트 시간이 밀리초 단위로 표시됩니다. 구체적으로 다음을 보여줍니다.
- 왼쪽에 마지막으로 측정된 페인트 시간입니다.
- 오른쪽의 현재 그래프의 최솟값과 최댓값입니다.
- 하단에 지난 80프레임의 기록을 표시하는 막대 그래프입니다 (차트의 선은 참조점으로 16밀리초를 나타냅니다).
페인트 시간 측정값은 화면 해상도, 창 크기, Chrome이 실행 중인 하드웨어에 따라 다릅니다. 이러한 요소는 사용자마다 다를 수 있습니다.
워크플로
다음은 연속 페인팅 모드를 사용하여 페인팅 비용이 많이 드는 요소와 스타일을 추적하는 방법입니다.
- 웹 인스펙터의 설정을 열고 지속적인 페이지 다시 칠하기 사용 설정을 선택합니다.
- 요소 패널로 이동하여 화살표 키를 사용하거나 페이지에서 요소를 선택하여 DOM 트리를 탐색합니다.
- 새로 도입된 도우미인 H 단축키를 사용하여 요소의 표시 여부를 전환합니다.
- 페인트 시간 그래프를 보고 페인트 시간을 많이 추가하는 요소를 찾습니다.
- 해당 요소의 CSS 스타일을 살펴보고 그래프를 보면서 스타일을 켜거나 끌 때 속도가 느려지는 스타일을 찾습니다.
- 이 스타일을 변경하고 타임라인 녹화를 다시 실행하여 페이지 실적이 개선되었는지 확인합니다.
아래 애니메이션은 스타일 전환과 페인트 시간에 미치는 영향을 보여줍니다.
이 예에서는 CSS 스타일 box-shadow 또는 border-radius 중 하나를 사용 중지하면 페인팅 시간이 크게 줄어드는 것을 보여줍니다. 요소에 box-shadow와 border-radius를 모두 사용하면 Chrome에서 이를 최적화할 수 없으므로 매우 비용이 많이 드는 페인팅 작업이 발생합니다. 따라서 예와 같이 재색상이 많이 발생하는 요소가 있는 경우 이 조합을 피해야 합니다.
참고
연속 페인팅 모드는 표시된 전체 페이지를 다시 칠합니다. 이는 일반적으로 웹페이지를 탐색할 때는 해당되지 않습니다. 스크롤은 일반적으로 이전에 표시되지 않았던 부분만 페인트합니다. 페이지의 다른 변경사항의 경우 가능한 한 가장 작은 영역만 다시 칠해집니다. 따라서 스타일 개선이 실제로 페이지의 페인트 시간에 영향을 미쳤는지 다른 타임라인 녹화본을 통해 확인합니다.
continuous painting mode를 사용하면 CSS 스타일 border-radius 및 box-shadow와 같이 페인팅 시간이 많이 늘어날 수 있습니다. 일반적으로 이러한 기능을 사용하지 말라고 권장하지는 않습니다. 이러한 기능은 멋진 기능이며, YouTube는 이러한 기능이 마침내 제공되어 기쁩니다. 하지만 언제 어디서 사용할지 아는 것이 중요합니다.
재색상이 많은 영역에서는 사용하지 마세요. 일반적으로 과도하게 사용하지 마세요.
실시간 데모
아래를 클릭하여 Paul Irish가 연속 페인팅을 사용하여 고유하게 비용이 많이 드는 페인트 작업을 식별하는 데모를 확인하세요.