페인트 복잡성 단순화 및 페인트 영역 줄이기

페인트는 최종적으로 합성되는 픽셀을 채우는 과정입니다. 할 수 있습니다. 대체로 파이프라인의 모든 작업 중 가장 오래 실행되는 과정으로 가급적 피해야 합니다.

요약

  • 변형 또는 불투명도를 제외한 모든 속성 변경은 항상 페이트를 트리거합니다.
  • 페인트는 종종 픽셀 파이프라인에서 가장 비용이 많이 드는 부분입니다. 가능하면 사용하지 마세요.
  • 레이어 승격과 애니메이션 오케스트레이션을 통해 페인트 영역을 줄입니다.
  • Chrome DevTools 페인트 프로파일러를 사용하여 페인트 복잡성과 비용 평가 줄일 수 있습니다

레이아웃 및 페인트가 트리거되는 방식

요소의 도형을 변경하면 픽셀을 수정해야 하므로 레이아웃을 트리거하는 경우 항상 페인트를 트리거합니다.

전체 픽셀 파이프라인

배경, 텍스트 색상 또는 그림자와 같이 비기하학적 속성을 변경하는 경우에도 페인트를 트리거할 수 있습니다. 이러한 경우 레이아웃이 필요하지 않으며 파이프라인의 모양은 다음과 유사합니다.

레이아웃이 없는 픽셀 파이프라인

Chrome DevTools를 사용하여 빠르게 페인트 병목 현상 식별

Chrome DevTools를 사용하여 페인트 중인 영역을 빠르게 식별할 수 있습니다. 렌더링 탭 열기 페인트 플래싱을 사용 설정합니다.

이 옵션을 사용 설정하면 페인트가 발생할 때마다 Chrome에서 화면이 녹색으로 깜박입니다. 전체 화면이 녹색으로 깜박이거나 생각하지 않았던 화면 영역을 페인트해야 한다면 조금 더 자세히 살펴보세요.

페인트가 발생할 때마다 페이지가 녹색으로 깜박입니다.

이동 또는 페이드 요소 승격

페인트가 항상 메모리의 단일 이미지로 수행되는 것은 아닙니다. 실제로 필요한 경우 브라우저가 여러 이미지나 컴포지터 레이어로 페인트할 수 있습니다.

컴포지터 레이어 표현

이 접근 방식의 이점은 정기적으로 다시 페인트하거나 변환과 함께 화면에서 움직이는 요소를 다른 요소에 영향을 주지 않고 처리할 수 있다는 것입니다. 이는 Sketch, GIMP, Photoshop과 같은 아트 패키지와 동일합니다. 이 패키지에서는 개별 레이어를 서로 겹쳐 처리하고 합성하여 최종 이미지를 만들 수 있습니다.

새 레이어를 생성하는 가장 좋은 방법은 모든 주요 최신 브라우저 엔진에서 사용할 수 있는 will-change CSS 속성을 사용하는 것입니다. transform 값을 사용하면 will-change가 새 컴포지터 레이어를 만듭니다.

.moving-element {
  will-change: transform;
}

하지만 각 레이어는 메모리와 관리가 필요하므로 너무 많은 레이어를 생성하지 않도록 주의하세요. 자세한 내용은 컴포지터(compositor) 전용 속성 고수 및 레이어 수 관리 섹션을 참조하세요.

요소를 새 레이어로 승격시킨 경우 DevTools를 사용하여 그렇게 하면 성능상의 이점이 있는지 확인합니다. 프로파일링 없이 요소를 승격하지 마세요.

페인트 영역 줄이기

하지만 때로는 요소 승격에도 불구하고 페인트 작업이 계속 필요합니다. 페인트 문제의 큰 문제는 브라우저가 페인트가 필요한 두 영역을 통합하고 전체 화면을 다시 페인트할 수 있다는 것입니다. 예를 들어 페이지 상단에 고정된 헤더가 있고 화면 하단에서 무언가를 페인트하면 전체 화면이 다시 페인트될 수 있습니다.

페인트 영역을 줄이는 방법은 애니메이션과 전환이 겹치지 않도록 조정하거나 페이지의 특정 부분의 애니메이션을 피하는 방법을 찾는 경우가 많습니다.

페인트 복잡성 단순화

화면 일부를 페인트하는 데 걸리는 시간입니다.

페인트는 작업에 따라 비용에 차이가 있습니다. 예를 들어, 그림자처럼 흐리게 만드는 효과 적용은 빨간색 상자를 그리는 것보다 시간이 더 많이 소요됩니다. 하지만 CSS 관점에서 보면 이것이 항상 명확한 것은 아닙니다. background: red;box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5);는 반드시 매우 다른 성능 특성을 가진 듯이 보일 필요가 없지만 그렇게 보입니다.

앞의 스크린샷에서 본 것처럼 페인트 프로파일러를 사용하면 효과를 달성하기 위해 다른 방법을 살펴봐야 하는지 여부를 판단할 수 있습니다. 더 저렴한 스타일 세트나 대체 수단을 사용하여 최종 결과를 얻을 수 있는지 자문해 보세요.

특히 애니메이션 중에 항상 페인트를 피하려는 경우 프레임당 10ms는 일반적으로 특히 휴대기기에서 페인트 작업을 수행하기에 충분하지 않습니다.