The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

애니메이션 및 성능

애니메이션을 만들 때마다 60fps를 유지하세요. 애니메이션이 버벅거리거나 정지하면 사용자의 눈에 거슬리고 거부감을 줄 수 있습니다.

TL;DR

  • 애니메이션이 성능 문제를 일으키지 않도록 주의하세요. 주어진 CSS 속성 애니메이션의 영향을 숙지하세요.
  • 페이지의 기하학적 형태(레이아웃)를 변경하거나 페인트를 유발하는 애니메이션 속성은 특히 비용이 많이 듭니다.
  • 가급적 변형 및 불투명도 변경을 고수하세요.
  • will-change를 사용하여 애니메이션 적용 대상을 브라우저가 알도록 하세요.

애니메이션 속성은 무료가 아니며 각 속성의 비용은 다릅니다. 예를 들어, 요소의 widthheight 애니메이션은 기하학적 형태를 변경하고, 페이지의 다른 요소를 이동하거나 크기를 변경할 수 있습니다. 이 프로세스를 레이아웃(Firefox와 같은 Gecko 기반 브라우저에서는 리플로우)이라고 하며, 페이지에 많은 요소가 있는 경우 비용이 많이 들 수 있습니다. 레이아웃이 트리거될 때마다 페이지 또는 페이지의 일부를 그려야 하며, 이는 일반적으로 레이아웃 작업 자체보다 휠씬 많은 비용이 듭니다.

레이아웃 또는 페인트를 트리거하는 애니메이션 속성은 가급적 피해야 합니다. 최신 브라우저의 경우 이는 애니메이션을 opacity 또는 transform으로 제한하는 것을 의미하며, 브라우저가 이 둘을 효과적으로 최적화할 수 있습니다. 애니메이션이 자바스크립트 또는 CSS에 의해 처리되는지 여부는 상관이 없습니다.

개별 CSS 속성에 의해 트리거되는 작업의 전체 목록은 CSS 트리거를 참조하세요. 또한 HTML5 Rocks에서 고성능 애니메이션을 생성하기 위한 전체 가이드를 참조하세요.

will-change 속성 사용

will-change를 사용하여 요소의 속성을 변경하려고 한다는 것을 브라우저가 알도록 하세요. 그러면 개발자가 변경을 수행하기 전에 브라우저를 최적화할 수 있습니다. 그러나 will-change를 남용하지는 마세요. 그럴 경우 브라우저가 리소스를 낭비하여 더 많은 성능 문제를 야기할 수 있습니다.

일반적으로 사용자의 상호작용으로 또는 애플리케이션의 상태로 인해 그 다음 200ms 이내에 애니메이션이 트리거될 수 있는 경우, 애니메이션 요소에 will-change를 적용하는 것이 좋습니다. 대부분의 경우 앱의 현재 뷰에서 애니메이션을 적용할 모든 요소는 변경할 속성에 대해 will-change를 활성화해야 합니다. 이전 가이드에서 사용한 상자 샘플의 경우, transform 및 opacity에 will-change를 추가하면 다음과 같게 됩니다.

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

이제 이를 지원하는 브라우저, 현재는 Chrome, Firefox 및 Opera가 적절한 최적화를 수행하여 해당 속성의 변경 또는 애니메이션 적용을 지원합니다.

CSS와 자바스크립트의 성능 비교

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

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

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

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

주어진 속성 애니메이션에 의해 어떤 작업이 트리거되는지에 대한 자세한 내용은 CSS 트리거를 참조하세요.