[CSS] will-change

브라우저에게 엘리먼트의 동적인 변화에 대한 힌트를 알려주는 것.
따라서 will-change속성은 성능 최적화 코드를 작성할 수 있게 도와준다.

/* 키워드 값 */
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;

• 과도하게 사용하지 말아라
  will-change의 초과사용은 브라우저가 가능한 변화에 대한 준비를 시도하기 때문에
  과도한 메모리가 사용되며 자원을 소비한다.

• 페이지에 문제가 없다면 사용하지 말아라
  will-change는 당장의 성능 문제를 해결하기 위한 마지막 수단으로 사용하자.

• 스크립트 코드를 사용하여 변화발생의 전후로 will-change 의 활성/비활성을 바꿔주는 것이 좋다. (종료되면 will-change 삭제)

will-change는 실제로 변화시키는 속성과 실제로 변화가 발생할 엘리먼트에 설정하라.
그리고 변화가 종료되면 삭제하라.

참고
https://developer.mozilla.org/ko/docs/Web/CSS/will-change
https://dev.opera.com/articles/ko/css-will-change-property