애니메이션은 실적이 우수해야 합니다. 그렇지 않으면 사용자 환경에 부정적인 영향을 미칩니다.
애니메이션을 실행할 때마다 60fps를 유지하세요. fps가 낮으면 사용자에게 눈에 띄고 사용자 환경에 부정적인 영향을 미치는 끊김이나 중단이 발생합니다.
- 애니메이션으로 인해 성능 문제가 발생하지 않도록 주의하세요. 특정 CSS 속성에 애니메이션을 적용할 때의 영향을 파악해야 합니다.
- 페이지의 도형 (레이아웃)을 변경하거나 페인팅을 일으키는 속성을 애니메이션 처리하는 것은 특히 비용이 많이 듭니다.
- 가능한 경우 변환 및 불투명도 변경을 고수하세요.
will-change
를 사용하여 브라우저에 애니메이션을 적용할 항목을 알립니다.
속성 애니메이션은 무료가 아니며 일부 속성은 다른 속성보다 애니메이션이 저렴합니다. 예를 들어 요소의 width
및 height
에 애니메이션을 적용하면 도형이 변경되고 페이지의 다른 요소가 이동하거나 크기가 변경될 수 있습니다. 이 프로세스를 레이아웃 (또는 Firefox와 같은 Gecko 기반 브라우저의 경우 리플로)이라고 하며 페이지에 요소가 많은 경우 비용이 많이 들 수 있습니다. 레이아웃이 트리거될 때마다 일반적으로 페이지 또는 페이지의 일부를 페인트해야 하며, 이는 일반적으로 레이아웃 작업 자체보다 훨씬 더 많은 비용이 듭니다.
가능하면 레이아웃이나 페인트를 트리거하는 속성의 애니메이션은 피해야 합니다. 대부분의 최신 브라우저의 경우 애니메이션을 opacity
또는 transform
로 제한하는 것이 좋습니다. 이 두 속성은 모두 브라우저에서 고도로 최적화할 수 있습니다. 애니메이션이 JavaScript 또는 CSS로 처리되는지는 중요하지 않습니다.
고성능 애니메이션을 만드는 방법에 관한 전체 가이드를 읽어보세요.
will-change
속성 사용
will-change
를 사용하여 브라우저에 요소의 속성을 변경하려는 의도를 알립니다. 이렇게 하면 브라우저에서 변경사항을 적용하기 전에 가장 적절한 최적화를 적용할 수 있습니다. 하지만 will-change
를 과도하게 사용하면 브라우저에서 리소스를 낭비하여 더 많은 성능 문제가 발생할 수 있으므로 주의하세요.
일반적으로 사용자 상호작용 또는 애플리케이션 상태로 인해 다음 200ms 내에 애니메이션이 트리거될 수 있다면 애니메이션 요소에 will-change
를 사용하는 것이 좋습니다. 따라서 대부분의 경우 애니메이션을 적용하려는 앱의 현재 뷰에 있는 모든 요소에는 변경하려는 속성에 will-change
가 사용 설정되어야 합니다. 이전 가이드에서 사용한 상자 샘플의 경우 변환 및 불투명도에 will-change
를 추가하면 다음과 같이 표시됩니다.
.box {
will-change: transform, opacity;
}
이제 이를 지원하는 브라우저(현재 대부분의 최신 브라우저)는 이러한 속성의 변경 또는 애니메이션을 지원하기 위해 내부적으로 적절한 최적화를 실행합니다.
CSS와 JavaScript 성능 비교
웹에는 성능 관점에서 CSS 및 JavaScript 애니메이션의 상대적 장점을 논의하는 페이지와 댓글 대화목록이 많이 있습니다. 다음과 같은 몇 가지 유의사항이 있습니다.
CSS 기반 애니메이션과 기본적으로 지원되는 웹 애니메이션은 일반적으로 '컴포저 트레드'라는 스레드에서 처리됩니다. 이는 스타일 지정, 레이아웃, 페인팅, JavaScript가 실행되는 브라우저의 '기본 스레드'와는 다릅니다. 즉, 브라우저가 기본 스레드에서 비용이 많이 드는 작업을 실행하는 경우 이러한 애니메이션이 중단되지 않고 계속 진행될 수 있습니다.
변환 및 불투명도에 대한 다른 변경사항은 대부분 컴포저 스레드에서 처리할 수도 있습니다.
애니메이션이 페인트, 레이아웃 또는 둘 다를 트리거하는 경우 '기본 스레드'에서 작업을 실행해야 합니다. 이는 CSS 기반 애니메이션과 JavaScript 기반 애니메이션 모두에 적용되며 레이아웃 또는 페인트의 오버헤드는 CSS 또는 JavaScript 실행과 관련된 모든 작업을 압도할 수 있으므로 이 질문은 무의미합니다.