애니메이션 및 성능

애니메이션은 잘 실행되어야 하며 그렇지 않으면 사용자에게 거부감을 줄 수 있습니다.

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를 활성화해야 합니다. 이전 가이드에서 사용한 상자 샘플의 경우, transform 및 opacity에 will-change를 추가하면 다음과 같게 됩니다.

.box {
  will-change: transform, opacity;
}

이제 이를 지원하는 브라우저(현재 대부분의 최신 브라우저)가 최적화하여 해당 속성의 변경 또는 애니메이션을 지원합니다.

CSS와 JavaScript의 성능 비교

CSS 및 JavaScript 애니메이션의 성능 관련 장단점을 토론하는 페이지와 코멘트 스레드가 웹에 많이 있습니다. 다음과 같은 사항에 유의하세요.

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

• 많은 경우에 변형 및 불투명도의 다른 변경사항도 컴포지터 스레드에 의해 처리됩니다.

• 애니메이션이 페인트, 레이아웃 또는 둘 다를 트리거하는 경우, 작업을 수행하기 위해 '메인 스레드'가 필요합니다. 이는 CSS 및 JavaScript 기반 애니메이션에 모두 적용되며, 레이아웃 또는 페인트의 오버헤드는 CSS 또는 JavaScript 실행과 연관된 모든 작업에 악영향을 미치고, 해결 불가능한 문제를 유발할 수 있습니다.