성능 최적화

성능 최적화 (Will Change)

브라우저에게 요소가 곧 바뀔 것이라고 미리 알려서, 필요한 애니메이션/변화를 준비하게 만드는 성능 최적화 유틸리티예요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

will-change-auto will-change: auto;

will-change-scroll will-change: scroll-position;

will-change-contents will-change: contents;

will-change-transform will-change: transform;

will-change-<custom-property> will-change: var(<custom-property>);

will-change-[<value>] will-change: <value>;

예시 (Examples)

will-change로 최적화하기 (Optimizing with will change)

will-change-scroll, will-change-contents, will-change-transform 유틸리티를 사용하면 곧 바뀔 것으로 예상되는 요소를 최적화할 수 있어요. 브라우저에게 애니메이션이 실제로 시작되기 전에 필요한 준비를 하라고 지시하는 거예요.

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

이 유틸리티는 요소가 바뀌기 직전에 적용하고, 변경이 끝난 직후 will-change-auto로 제거하는 것이 권장돼요.

will-change 속성은 알려진 성능 문제를 처리할 때 마지막 수단으로 사용하도록 설계됐어요. 이 유틸리티를 과도하게 쓰거나, 단지 성능 문제를 예상해서 미리 쓰는 것은 오히려 페이지 성능을 떨어뜨릴 수 있으니 주의하세요.

커스텀 값 사용하기 (Using a custom value)

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() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

성능 최적화