CSS 애니메이션 퍼포먼스 높이기

시각적 애니메이션 효과를 향상하는 방법이다. will-change
애플 사이트에서도 이 방법을 유용하게 사용하고 있다.

애플 사이트
will-change 클래스에 will-change: transform, opacity 속성이 적용되어 있고, 이 클래스를 추가 / 제거하면서 애니메이션 요소를 최적화한다.

will-change?

브라우저에 애니메이션 효과가 발새할 것을 미리 알려준다.
나는 이 요소의 transform과 opacity를 변경할거야~!
이렇게 미리 알려주면 브라우저가 미리 대비 킻 준비를 한다.

IE 빼고 대부분의 브라우저에서 will-change를 지원한다.

• MDN will-change 참고

요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공한다.
잠재적으로 성능 비용이 큰 작업을 그것이 실제로 요구되기 전에 미리 실행함으로써 페이지의 반응성을 증가시킬 수 있다.

will-change 주의사항

• 너무 많은 요소에 will-change 사용하지마라. 오히려 성능과 배터리면에서 역효과를 낼 수 있다.
• 위와 일맥상통하는 말인데 아껴써라.
• JavaScript로 특정 class를 추가/제거해서 will-change 기능을 넣었다 뺐다해라.
  CSS로 고정으로 적용하면 브라우저는 더 오랫동안 will-change 기능을 활성화시킨다.
  이는 브라우저에 과부하를 준다.
  JavaScript로 애니메이션 변환 발생 전후로 will-change 기능을 추가 / 제거한다.

속성값으로 scroll-position, content 등등이 있지만 대개 transform, opacity 등 이런걸 적용한다.

#show-scene-0 #scroll-section-0 .sticky-elem,
#show-scene-1 #scroll-section-1 .sticky-elem,
#show-scene-2 #scroll-section-2 .sticky-elem,
#show-scene-3 #scroll-section-3 .sticky-elem {
    will-change: transform, opacity;
}

스크롤에 의해 각 섹션 진입할 때마다 show-scene-0 이런 id 값이 변하므로 위와 같이 적용하면 된다.
다시 말하지만 will-change는 성능개선을 위한 마지막 수단이다.

will-change를 적용했다고 항상 체감이 되는건 아니다.