애니메이션은 정상적으로 작동해야 하며, 그렇지 않으면 사용자 환경에 부정적인 영향을 미칩니다.
애니메이션을 만들 때마다 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 실행과 관련된 모든 작업을 축소하여 의문을 일으킬 수 있습니다.