will-change

예제

will-change로 최적화하기

will-change-scroll, will-change-contents, will-change-transform 유틸리티를 사용해 곧 변경될 예정인 엘리먼트를 최적화할 수 있습니다. 이 유틸리티는 브라우저에게 애니메이션이 실제로 시작되기 전에 필요한 준비를 하도록 지시합니다.

<div class="overflow-auto will-change-scroll">  <!-- ... --></div>

이 유틸리티는 엘리먼트가 변경되기 직전에 적용하고, 변경이 끝난 후에는 will-change-auto를 사용해 제거하는 것이 좋습니다.

will-change 속성은 알려진 성능 문제를 다룰 때 최후의 수단으로 사용하는 것이 좋습니다. 성능 문제를 예상해서 너무 많이 사용하거나 남용하면 오히려 페이지 성능이 저하될 수 있으니 주의해야 합니다.

커스텀 값 사용하기

will-change-[<value>] 구문을 사용하세요 will-change 속성를 완전히 커스텀한 값으로 설정하려면:

<div class="will-change-[top,left] ...">  <!-- ... --></div>

CSS 변수를 사용하려면 will-change-(<custom-property>) 구문을 사용할 수도 있습니다:

<div class="will-change-(--my-properties) ...">  <!-- ... --></div>

이는 will-change-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.