[CSS] will-change 애니메이션 성능을 향상시켜 준다.

LG 클론 코딩을 진행하면서 알게된 속성이다.
실제로 해당 포트폴리오에 적용하진 않았지만(그 이유는 아래에 나옴) 면접 질문에 간간히 나오는 단골 속성이라는 이야기를 주워듣게 되어 이렇게 기록해 두려고 한다.

👉🏻 LG 클론 코딩 보러가기

🎀 will-change란?

will-change CSS 속성은 transform, opacity 따위의 속성 값이 변경될 때, 미리 브라우저에 알려주어 브라우저가 최적화할 수 있게 해준다.

/* 키워드 값 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* Example of <custom-ident> */
will-change: opacity; /* Example of <custom-ident> */
will-change: left, top; /* Example of two <animateable-feature> */

/* 전역 값 */
will-change: inherit;
will-change: initial;
will-change: unset;

모든 CSS 속성에 적용할 수 있는 건 아니니 확인하여 적용하도록 하자.

🎀 사용법

.will-change {
	will-change: transform, opacity;
}

이 처럼 클래스를 만들어두고 넣었다 뺐다 할 수 있는 것이 좋다.

🎀 주의할 점이 한 두개가 아니다!

너무 많은 요소에 will-change 를 적용하지 말자.

이미 브라우저는 모든 최적화를 위해 여러 시도를 하고 있다. 과도한 사용은 페이지 속도를 늦추거나 엄청난 자원을 소비할 수 있다.

활성/비활성을 해주는 것이 좋다.

브라우저의 최적화 과정의 마지막은 가능한 바로 최적화를 제거하고 기본 상태로 되돌리는 것이라고 한다. 그런데 will-change 속성을 활성화만 시켜두고 비활성화 시키지 않으면, 최적화된 상태를 매우 오랫동안 유지하게 된다는 의미이다. 될 수 있으면 JS로 활성/비활성을 조절해 주는것이 좋다고 한다.

남용하지 말자.

이미 브라우저가 최적화된 상태라면, 굳이 will-change 속성을 입혀줄 필요가 없다.



👉🏻 참고 링크

나의 경우는 브라우저 성능이 떨어진다 생각하지 않았기 때문에 굳이 will-change를 넣어주지 않았다.