애니메이션 및 성능

애니메이션은 정상적으로 작동해야 하며, 그렇지 않으면 사용자 환경에 부정적인 영향을 미칩니다.

Paul Lewis

Sam Thorogood

애니메이션을 만들 때마다 60fps를 유지하세요. 그보다 적으면 끊김 현상이나 멈춤 현상이 발생하여 사용자의 눈에 띄고 부정적인 영향을 미칩니다.

• 애니메이션이 성능 문제를 일으키지 않도록 주의하세요. 주어진 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와 자바스크립트 성능 비교

성능의 관점에서 CSS 및 JavaScript 애니메이션의 상대적인 장점을 논의하는 여러 페이지와 코멘트 스레드가 웹에 있습니다. 이와 관련해 다음과 같이 몇 가지 유의해야 할 사항이 있습니다.

• CSS 기반 애니메이션과 기본적으로 지원되는 웹 애니메이션은 일반적으로 '컴포지터 스레드'라고 하는 스레드에서 처리됩니다. 이는 스타일 지정, 레이아웃, 페인팅 및 JavaScript가 실행되는 브라우저의 "기본 스레드"와 다릅니다. 즉, 브라우저가 기본 스레드에서 비용이 많이 드는 작업을 실행 중인 경우 이러한 애니메이션이 중단되지 않고 계속 실행될 수 있습니다.

• 대부분의 경우 변형 및 불투명도의 다른 변경도 컴포지터 스레드에 의해 처리될 수 있습니다.

• 애니메이션이 페인트, 레이아웃 또는 둘 다를 트리거하는 경우 '기본 스레드' 작업을 실행하는 데 필요합니다 이는 CSS 및 JavaScript 기반 애니메이션에 모두 해당되며, 레이아웃 또는 페인트의 오버헤드는 CSS 또는 JavaScript 실행과 관련된 모든 작업을 축소하여 의문을 일으킬 수 있습니다.