요약: Chromium은 SVG 애니메이션, 백분율 기반 변환, 그리고 조만간 배경 색상 및 클립 경로 애니메이션의 하드웨어 가속 기능을 자동으로 업데이트하고 있습니다.
웹 애니메이션 성능과 관련하여 '하드웨어 가속' 및 'GPU 가속' 애니메이션이라는 용어가 나올 수 있습니다. 그러나 이것들은 무엇을 의미할까요? 하드웨어 가속 스타일은 CPU (중앙 처리 장치)가 아닌 GPU (그래픽 처리 장치)를 활용하여 시각적 스타일을 렌더링하는 스타일입니다. GPU가 웹페이지의 시각적 변경사항을 CPU보다 더 빠르게 렌더링할 수 있기 때문입니다.
GPU를 사용하여 그래픽 집약적인 전환 및 애니메이션을 오프로드하면 이러한 애니메이션은 기본 스레드의 영향을 받지 않으므로 시각적 효과가 더 부드럽고 버벅거림이 줄어듭니다. 애니메이션이 기본 스레드에서 제거되면 페이지에서 실행 중인 다른 활성 스크립트의 크러스트를 우회하여 시각적 요소가 느려지고 버벅거림이 발생할 수 있습니다.
하드웨어 가속 애니메이션 사용 설정
하드웨어 가속 애니메이션은 레이어로 합성되며 개발자가 매끄러운 60FPS (초당 프레임 수) 애니메이션을 달성하여 시각적 렌더링 성능을 개선할 수 있습니다. 현재 웹에서 하드웨어 가속 애니메이션 및 전환을 지정하고 사용 설정하는 몇 가지 방법이 있습니다.
- CSS
transform함수를 사용하거나opacity또는filter값을 전환 - 요소에
will-change속성을 추가합니다. OffscreenCanvas를 통해 애니메이션 캔버스 그림 만들기- WebGL 3D 그림 만들기
opacity, filter, transform만 포함되지만 background-color 및 clip-path가 곧 목록에 조인됩니다. Chromium에서 기본적으로 하드웨어 가속이 사용되는 다른 기능은 무엇인가요? SVG 애니메이션을 비롯한 몇 가지 기능이 파이프라인에 도입될 예정입니다. 개발자들은 이러한 기능을 적극적으로 요청해 왔습니다.
하드웨어 가속 SVG 애니메이션
SVG는 모든 웹사이트에 추가할 수 있는 유용한 도구이며, 이제 SVG와의 상호작용의 성능을 높일 수 있습니다. Chromium 89부터 Chrome은 SVG 애니메이션에 기본적으로 하드웨어 가속을 사용 설정하기 위해 Firefox와 같은 경쟁 제품에 참여합니다. 개발자는 무엇을 해야 하나요? 아무것도 하지 않습니다. Chromium 89 이상에서 SVG 애니메이션에는 자동으로 적용됩니다.
예시
하드웨어 가속을 사용할 때와 사용하지 않을 때 SVG 애니메이션의 차이점을 살펴봅시다. 로드 표시기는 facebook.com에서 볼 수 있는 것과 같이 일반적으로 사용되는 UI 요소입니다. 이 표시기는 사용자가 응답을 기다리는 동안 서버에서 작업이 수행되고 있음을 나타냅니다. 여기에 표시된 경우에는 사이드바에 추가 결과가 로드됩니다.
DevTools를 열면 프로파일링을 시작하고 CPU와 GPU 가속 애니메이션 환경의 차이점을 실제로 확인할 수 있습니다.
왼쪽(Chromium 87)에서 스피너가 연속적으로 애니메이션될 때마다 다시 페인트가 실행되는 것을 확인할 수 있습니다. Chromium 89 및 Firefox와 같이 오른쪽에는 페인트를 다시 적용할 수 없습니다. 페인트 플래싱을 켤 때 DevTools Rendering 패널에서 테스트할 수 있습니다.
성능 패널을 자세히 살펴보면 이러한 효과와 이 효과가 웹 속성의 전반적인 성능에 미치는 영향을 다시 확인할 수 있습니다. 따라서 애니메이션의 렌더링과 페인트 시간을 완전히 없애기 때문에 애니메이션이 더 매끄러워지고 애플리케이션의 성능이 향상됩니다. Facebook은 하드웨어 가속 SVG에 대한 브라우저 지원이 더 많아질 때까지 이 SVG 기반 로더를 제공하지 않지만 테마 설정, 확장 및 해상도 요구사항의 유연성이 향상되고 유지관리가 더 쉬워집니다.
비율 애니메이션
상호작용팀은 Chromium 89에서 백분율 변환 애니메이션도 지원합니다. 백분율 기반 애니메이션은 백분율 기반 움직임이 포함된 상호작용을 설명합니다. 예를 들어 항목을 20%까지 확장하거나 translateX: -100% 등을 사용하여 화면 밖에서 반응형 사이드바 메뉴를 슬라이드할 수 있습니다.
이러한 유형의 UI 애니메이션은 비교적 일반적이지만 이전에는 이러한 애니메이션을 합성할 수 없었으므로 현재는 하드웨어 가속을 활용하지 않습니다. 변환의 백분율은 상자 크기 (즉, 레이아웃)에 따라 달라지지만, 레이아웃 크기가 모든 프레임을 변경하지 않는 한 브라우저에서는 절대 변환 값을 미리 계산하여 개발자가 픽셀 값을 제공한 것처럼 실행할 수 있습니다. 좋은 소식은 Chromium팀에서 이 기능을 개발하는 데 있으며 곧 이러한 유형의 애니메이션이 자동으로 합성되고 하드웨어로 가속화될 것이라는 점입니다.
다음 단계는 무엇인가요?
이렇게 업데이트된 애니메이션으로 웹 스타일이 훨씬 더 매끄러워집니다. 위에서 언급했듯이 팀은 앞으로 다가올 웹 니즈가 무엇인지 항상 찾고 있습니다. 현재는 background-color 및 clip-path가 향후 Chromium 버전에서 하드웨어 가속을 자동으로 사용하도록 변환될 예정입니다.
background-color는 전환 및 효과의 사용량 수가 많기 때문에 우선순위가 높으며, clip-path는 웹에서 훨씬 더 우수한 전환 효과를 지원합니다. 성능이 상호작용과 만나면
모두가 얻게 됩니다
표지 이미지: Unsplash의 Siora Photography