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