will-change 및 레이어 승격

will-change는 요소가 애니메이션될 예정임을 브라우저에 알려 미리 최적화를 설정할 수 있게 합니다. 예를 들어 애니메이션이 시작되기 전에 요소를 자체 GPU 합성기 레이어로 승격할 수 있습니다.

변경될 속성을 지정하십시오: will-change: transform, will-change: opacity, will-change: transform, opacity. 애니메이션이 끝나면 will-change: auto를 사용하여 힌트를 제거하십시오.

will-change는 실제로 애니메이션될 요소에만, 애니메이션이 진행되는 동안에만 적용하십시오. JavaScript로 이를 추가하고 제거하는 방식(클래스를 통한 방식)이 정적인 요소에 영구적으로 적용해 두는 것보다 효율적입니다.

승격된 레이어 하나마다 GPU 메모리를 사용합니다. 많은 요소를 동시에 승격하면 메모리 부담이 발생하여 성능이 저하될 수 있으며, GPU RAM이 제한된 모바일 기기에서는 특히 그렇습니다. 꼭 필요한 경우에만 신중하게 승격하십시오.

will-change를 * 또는 많은 수의 요소에 적용하지 마십시오. 레이어가 너무 많이 생성되면 최적화 비용이 이점보다 커집니다. 먼저 성능을 분석하고, 특정 버벅임 문제가 확인된 경우에만 will-change를 추가하십시오.

will-change가 등장하기 전에는 개발자들이 transform: translateZ(0) 또는 translate3d(0,0,0)을 사용하여 GPU 승격을 강제했습니다. will-change가 적절하고 의미론적인 방법입니다. translateZ 해킹도 여전히 작동하지만, 의도를 표현하는 방법이 아니라 구현 세부 사항입니다.

승격된 레이어는 새로운 쌓임 컨텍스트를 만듭니다. 이는 z-index 동작에 영향을 줍니다. 승격된 요소의 자식 요소는 문서 루트가 아니라 해당 요소를 기준으로 쌓입니다. 요소를 승격할 때 쌓임 컨텍스트의 변화를 주의하십시오.

mouseenter가 발생하거나 애니메이션이 시작될 때 will-change를 추가하고, mouseleave가 발생하거나 애니메이션이 끝날 때 제거하십시오. 이렇게 하면 유휴 요소에 GPU 메모리를 영구적으로 할당하지 않으면서 브라우저에 준비 시간을 제공할 수 있습니다.

Chrome DevTools → 레이어 패널에서 승격된 레이어를 시각화할 수 있습니다. 레이어 수가 수백 개로 많으면 과도하게 승격된 것입니다. 메모리 섹션에는 GPU 메모리 사용량이 표시됩니다. 승격된 레이어 수를 최소화하고 저사양 기기 프로필에서 모니터링하십시오.

CSS contain: layout paint는 격리와 비슷하게 하위 트리로 레이아웃 및 페인트 계산을 제한합니다. GPU 레이어를 생성하지 않고 자체적으로 완결된 위젯의 성능을 향상하므로, 애니메이션되지 않는 요소에는 will-change보다 비용이 적은 최적화 방법입니다.

will-change는 모든 최신 브라우저에서 완전히 지원됩니다. 브라우저는 이를 명령이 아니라 힌트로 취급하므로 리소스가 부족하면 무시할 수 있습니다. 이를 보장 수단으로 의존하지 말고 성능 최적화를 위한 안내 힌트로만 사용하십시오.

많은 요소에 동시에 will-change를 적용할 때 가장 큰 위험은 무엇입니까?

will-change는 애니메이션이 시작되기 전에 요소를 GPU 합성기 레이어로 승격하여 애니메이션 시작 시 발생하는 승격 비용을 없앱니다. 성능 분석에서 버벅임이 확인된 경우에만 동적으로, 최소한으로 적용하여 과도한 승격으로 인한 GPU 메모리 사용을 피하십시오.