https://wit.nts-corp.com/2020/06/05/6134

본 문서는 원작자의 동의를 얻어 원문의 의미를 해치지 않도록 번역하였으며, 이해를 돕기 위한 Chrome DevTools 활용 방법을 추가했습니다.

웹 페이지에서 애니메이션을 어떻게 구현하고 계신가요?

JavaScript animation? CSS animation?

라이브러리를 활용해 JavaScript 애니메이션을 구현할 수 있지만, 현재의 native CSS도 다양한 애니메이션을 구현할 수 있습니다. 그 중 성능 향상에 도움되는 CSS 애니메이션 구현 방식을 소개합니다.

CSS 애니메이션은 일부 속성에 의존합니다.

• position : absolute / relative
• transform
• opacity
• left, right, top, bottom 등등…

애니메이션의 속성이 다른 두 개의 테스트 결과를 살펴봤습니다.

Untitled

레이블이 없었더라면 차이를 전혀 못느꼈을 거에요. 이 결과를 보면, 다른 방식이지만 보여지는 것은 동일하다는 것을 알 수 있죠. 하지만 Chrome의 DevTools로 측정을 해보면 특별한 차이를 발견할 수 있습니다.

성능 측정 결과의 이해를 돕기 위해, 웹 브라우저의 렌더링 방식을 간단히 살펴보겠습니다. 웹 브라우저는 UI를 다음과 같은 방식으로 생성합니다.

1. Recalculate Style요소에 적용할 스타일을 계산.
2. Layout요소의 레이아웃을 생성하고, 화면에 배치.
3. Paint생성된 모든 레이아웃에 픽셀을 추가. GPU는 필요에 따라 생성한 레이어의 비트맵을 사용해 화면에 렌더링.
4. Composite Layers생성한 레이어 계층을 합성. 이 계층을 내려다보면 모든 요소가 고유한 위치(복합 계층)를 갖는 완전한 웹 페이지로 보여집니다.

Composite Layers 생성은 CPU가 애니메이션을 처리하기 위해 GPU와 통신하는 단계입니다.transform, opacity와 같은 속성을 사용하면, CPU 대신 GPU를 사용해 웹 브라우저가 애니메이션을 수행할 수 있도록 할 수 있습니다.