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