M2 MacBook에서 작은 CSS 애니메이션이 CPU 60%, GPU 25% 사용률을 야기했습니다.

사소해 보이는 CSS 애니메이션이 제 M2 MacBook에서 CPU 60%, GPU 25%라는 수수께끼 같은 사용률을 소모하고 있었습니다. 이 글에서는 Chrome DevTools의 성능 프로파일링 도구를 사용하여 원인을 찾아내는 디버깅 프로세스를 자세히 설명합니다. 범인은 `height` 속성의 애니메이션이었습니다. 저자는 브라우저의 렌더링 파이프라인을 설명하고, 더 저렴한 `transform` 속성(시각적 아티팩트를 방지하기 위한 영리한 해결 방법 사용)으로 전환하여 리소스 소모량을 CPU 6% 미만, GPU 1% 미만으로 극적으로 줄인 방법을 보여줍니다.