CSS 애니메이션 : 성능

느린 애니메이션은 사용자 경험을 망칩니다.

우리의 뇌가 애니메이션을 부드럽게 인식하려면 초당 60프레임이 필요합니다.

이는 각 프레임 업데이트에 16ms 정도만 소비해야 한다는 것입니다.

안그러면 사용자는 버벅거림을 느끼게 됩니다.

애니메이션 성능은 깊고 심오한 주제임으로 필수 사항만 짚고 넘어갑니다.

 

픽셀 파이프라인

화면의 픽셀 색상을 업데이드 하는 경우, 다음과 같은 단계의 파이프라인이 있습니다.

• 스타일 재계산 — 먼저 어떤 CSS 선언이 어떤 요소에 적용되는지 파악해야 합니다.
• 레이아웃 — 다음으로 각 요소가 페이지에서 어디에 위치하는지 파악해야 합니다.
• 페인트 — 모든 것이 어디에 있는지 알게 되면 페인트를 시작할 수 있습니다.
  • 이것은 모든 픽셀이 어떤 색상이어야 하는지 파악("래스터화")하고 채우는 과정입니다.
• 합성(Compositing) — 마지막으로 이전에 칠해진 요소를 transform할 수 있습니다.

 

합성을 통해 브라우저는 이전 프레임에서 수행한 작업을 재사용할 수 있습니다.

처음에는 스크롤 성능을 돕기 위해 발명되었습니다.

웹 초기에는 사용자가 스크롤할 때 모든 프레임에서 전체 페이지를 다시 그려야 했습니다.

이것은 느리고 비참했기 때문에 브라우저에서 작업하는 똑똑한 사람들은 페인트 프로세스를 건너뛰고

대신 사용자가 스크롤할 때 페이지의 콘텐츠를 위 또는 아래로 슬라이드하는 방법을 찾았습니다.

합성은 많은 계산을 할 필요가 없기 때문에 번개처럼 빠릅니다.

이미 계산한 것을 변환하는 것입니다(이리저리 밀기, 회전 등).

각 CSS 속성은 픽셀 파이프라인에서 다른 단계를 트리거합니다.

 

요소의 높이에 애니메이션을 적용하는 경우 레이아웃을 다시 계산해야 합니다.

항목이 줄어들면 형제가 공간을 채우기 위해 빠르게 이동할 수 있기 때문입니다.

width, height, padding, margin과 같은 레이아웃에 영향을 미치는 속성에 애니메이션을 적용하지 않는 것이 가장 좋습니다.

 

background-color와 같은 속성은 페이지에서 요소의 위치를 ​​변경하는 색상이 없기 때문에 레이아웃에 영향을 미치지 않습니다.

따라서 레이아웃에 영향을 미치는 속성에 애니메이션을 적용하는 것보다 빠릅니다.

 

transform 속성은 특별합니다. 페인트 단계를 실행하지 않고도 속성에 애니메이션을 적용할 수 있습니다!

스크롤과 마찬가지로 이전 단계에서 수행한 작업을 재사용할 수 있습니다.

 

합성만으로 애니메이션할 수 있는 속성은 transform과 opacity두 가지뿐입니다.

Chrome에서는 filter도 가능하며 clip-path 및 background-color과 같은 더 많은 속성을 지원하기 위해 노력하고 있습니다.

 

transform과 opacity만 애니메이션할 수 있다는 뜻인가요?

그것보다 조금 더 유연할 수 있다고 생각합니다.

모든 레이아웃 재계산 / 리페인트가 동일하게 생성되는 것은 아닙니다!

예를 들어 절대 위치 요소의 높이를 조정하면 형제가 이동될 가능성이 없기 때문에 더 빠른 경향이 있습니다.

가장 좋은 방법은 저가형 스마트폰과 같은 초저가형 기기에서 애니메이션을 테스트하는 것입니다.

저가형 기기의 성능에 만족하면 배포하세요!

---

하드웨어 가속

브라우저 및 OS에 따라 특정 애니메이션에서 가끔 이상한 깜박임이 나타날 수 있습니다.

글씨를 주목하세요

글씨가 약간 이상하게 흔들리는 것처럼 보이는 이유는 CPU와 GPU가 아이템을 약간 다르게 렌더링 하기 때문입니다.

아래와 같은 방법으로 해당 문제를 피할 수 있습니다.

.btn {
  will-change: transform;
}

will-change는 선택한 요소에 애니메이션을 적용하고 이 경우 최적화해야 함을 브라우저에 알릴 수 있는 속성입니다.

실제로 이것이 의미하는 바는 브라우저가 GPU가 항상 이 요소를 처리하도록 한다는 것입니다.

더 이상 CPU와 GPU 사이에 연산 결과를 주고받을 필요가 없습니다.

 

will-change를 사용하면 하드웨어 가속이 필요한 요소임을 의도적으로 알릴 수 있습니다.

(비디오 메모리를 사용함에 주의하세요. 의도적으로 사용해야 합니다.)

브라우저는 이 문제에 대해 이해할 수 없는 고유한 논리를 가지고 있으며, 우리는 그것을 우연에 맡기고 싶지 않습니다.

transform: translateZ(0px)
backface-visibility: hidden
과 같이 아무런 연산이 필요없는 것처럼 보이는 속성들도, 하드웨어 가속에 의한 이상 현상이 발생할 수 있음을 조심하세요

참고

https://www.youtube.com/watch?v=DNGGzwmfouU