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