will-change

will-change: 값이 변경될 속성에 대한 힌트

웹이 동적으로 상호작용하는 복잡한 어플리케이션을 위한 플랫폼으로 진화함에 따라 transform, opacity 등 css 속성 값이 동적으로 변화하는 효과를 자주 사용한다.

 

이때, will-change는 브라우저에게 엘리먼트의 어떤 속성이 높은 확률로 변할 것인지 힌트를 줄 수 있다.

브라우저는 이 힌트로 앞으로 일어날 변화에 대해 미리 대비해 더 매끄러운 트랜지션을 구사할 수 있다.

will-chagne: auto; // 기본값
will-chagne: scroll-position; // 엘리먼트의 스크롤 위치가 바뀜
will-chagne: contents; // 엘리먼트의 컨텐츠 중 일부가 바뀜

// 특정 css 속성을 명시할 수 있음.
// transform, opacity, top, left, right, bottom 정도가 자주 사용됨
will-chagne: transform;
will-chagne: left, top; // 여러 속성을 동시에 명시

 

예시) .view 엘리먼트의 transform 속성 값이 변경될 것임을 설정

.view {
  will-change: transform;
}

 

🤕  유의사항

필요하지 않은 상황에서 will-change 속성을 남발한다면 오히려 성능 저하가 일어날 수 있다. 기본적으로 css 속성 값 변경이 성능에 문제없이 잘 동작할 때는 will-change를 사용하지 않는 것이 좋다.