성능: 변환 가능 속성과 다시 그리는 속성

브라우저는 레이아웃(크기 + 위치) → 페인트(픽셀) → 합성(GPU 레이어 병합)의 세 단계로 렌더링합니다. 더 앞선 단계를 실행시키는 속성을 애니메이션하면 비용이 많이 듭니다.

이러한 속성을 변경하면 브라우저가 페이지 전체 또는 상당 부분의 레이아웃을 다시 계산해야 합니다. 애니메이션에 사용하지 마세요.

• width, height
• margin, padding
• top, left
• font-size
• display

이러한 속성은 레이아웃을 건너뛰지만 픽셀을 다시 그립니다. 성능 비용은 보통 수준입니다.

• background-color
• color
• box-shadow
• border

이러한 속성은 레이아웃과 페인트를 모두 건너뛰므로 브라우저는 미리 래스터화된 레이어를 합성하기만 하면 됩니다. 매우 저렴하며 GPU 가속을 사용합니다.

• transform
• opacity

부드러운 60fps 애니메이션을 만들려면 transform과 opacity만 애니메이션하세요. top/left 대신 transform: translate()를 사용하고, display 페이드 대신 opacity를 사용하세요.

will-change는 애니메이션이 시작되기 전에 브라우저에 요소를 자체 GPU 레이어로 승격하도록 알려 애니메이션 중간에 발생하는 "승격 플래시"를 방지합니다.

애니메이션이 끝난 후에는 will-change: auto로 설정하거나 속성을 완전히 제거하세요. 너무 많은 요소를 승격된 상태로 유지하면 GPU 메모리가 낭비됩니다.

Chrome DevTools의 Performance 탭을 사용해 프레임 시간을 기록하고 검사하세요. Rendering 탭에서는 페인트 플래시(초록색 오버레이)를 표시하여 각 프레임에서 어떤 요소가 다시 그려지는지 확인할 수 있습니다.

가장 효과적인 최적화 방법은 위치 애니메이션을 변환으로 바꾸는 것입니다.

배경색 전환은 다시 그리기를 실행하지만 레이아웃은 실행하지 않습니다. 작은 요소에는 사용해도 괜찮습니다. 큰 배경에는 대신 불투명도 전환을 사용하는 의사 요소를 고려하세요.

contain 속성은 요소와 그 하위 트리가 서로 독립적임을 브라우저에 알립니다. 이를 통해 레이아웃 무효화 범위를 제한하고 다시 그리기 성능을 향상할 수 있습니다.

레이아웃이나 페인트를 실행하지 않고 합성 단계에서 애니메이션할 수 있는 CSS 속성 두 가지는 무엇인가요?

레이아웃 속성(width, top, margin)을 애니메이션하면 비용이 큰 재계산이 실행됩니다. 페인트 속성(color, background)은 더 저렴합니다. transform과 opacity만 레이아웃이나 페인트를 실행하지 않고 GPU 합성 단계에서 애니메이션됩니다. 부드럽고 성능이 좋은 애니메이션을 위해 항상 이 속성들을 우선 사용하세요.