배율 변경 시 합성된 레이어를 다시 래스터링

Chris Harrelson
Chris Harrelson
X GitHub

요약

Chrome 53부터 will-change: transform CSS 속성이 없는 경우 변환 크기가 변경될 때 모든 콘텐츠가 다시 래스터링됩니다. 즉, will-change: transform은 '빠르게 애니메이션 처리하세요'를 의미합니다.

이는 스크립트 조작을 통해 발생하는 변환 크기 조정에만 적용되며 CSS 애니메이션 또는 웹 애니메이션에는 적용되지 않습니다.

즉, 사이트의 콘텐츠가 더 보기 좋게 표시될 수 있지만 아래에 설명된 몇 가지 간단한 변경사항을 적용하지 않으면 속도가 느려질 수도 있습니다.

웹 개발자에게 미치는 영향

이 변경사항에 따라 will-change: transform는 콘텐츠를 고정된 비트맵으로 래스터화하도록 강제하는 것으로 생각할 수 있으며, 이후 변환 업데이트에서 변경되지 않습니다. 이를 통해 개발자는 해당 비트맵에서 이동, 회전, 크기 조정과 같은 변환 애니메이션의 속도를 높일 수 있습니다.

크기 조정 변환과 변환 변환은 구분되지 않습니다.

매우 빠른 (즉, 60fps) 변환 애니메이션 속도가 필요하고 모든 프레임에서 요소를 고품질로 래스터링하는 속도가 충분하지 않을 것으로 예상되는 경우 요소에 will-change: transform를 적용합니다. 그렇지 않으면 will-change: transform를 사용하지 마세요.

성능과 품질 간의 절충점을 최적화하려면 애니메이션이 시작될 때 will-change: transform를 추가하고 애니메이션이 끝날 때 삭제하는 것이 좋습니다. 그러나 will-change: transform를 추가하거나 삭제할 때 일회성 성능 비용이 많이 발생하는 경우가 많습니다.

추가 구현 고려사항

will-change: transform를 삭제하면 콘텐츠가 선명한 크기로 다시 래스터링되지만 다음 애니메이션 프레임에서만 (requestAnimationFrame)를 통해) 래스터링됩니다. 따라서 will-change: transform가 있는 레이어가 있고 재래스터링을 트리거한 다음 애니메이션을 계속하려는 경우 will-change:transform을 삭제한 다음 requestAnimationFrame() callback에서 다시 추가해야 합니다.

애니메이션 중에 언제든지 현재 크기로 래스터링하려면 위의 기법을 적용하여 한 프레임에서 삭제하고 후속 프레임에서 will-change: transform를 다시 추가합니다.

이로 인해 콘텐츠의 합성된 레이어가 손실되는 부작용이 발생하여 위의 추천이 다소 비용이 많이 들 수 있습니다. 이 문제가 발생하는 경우 이 작업 중에 콘텐츠가 합성된 레이어에 유지되도록 콘텐츠에도 transform: translateZ(0)를 추가하는 것이 좋습니다.

영향 요약

이 변경사항은 렌더링된 콘텐츠 품질, 성능, 개발자 제어에 영향을 미칩니다.

  • 렌더링된 콘텐츠 품질: 변환 크기를 애니메이션 처리하는 요소의 렌더링된 출력은 기본적으로 항상 선명합니다.
  • 성능: will-change: transform가 있을 때 변환 애니메이션이 빠릅니다.
  • 개발자 제어: 개발자는
    will-change: transform를 추가 및 삭제하여 요소별 및 애니메이션 프레임별로 품질과 속도 중에서 선택할 수 있습니다.

자세한 내용은 위의 참조 설계 문서를 참고하세요.

예

이 예에서 remainsBlurry ID가 있는 요소는 이 변경 후에도 흐리게 유지되지만 noLongerBlurry ID가 있는 요소는 선명해집니다. 이는 전자에 will- change: transform CSS 속성이 있기 때문입니다.

실제 애플리케이션의 변환 크기 애니메이션 예