Will-Change

Will-Change

will change 속성이 있다.

CSS를 쓰다보면 특히, Anmation을 써서 여러 효과들을 낼 때 필수적으로 고려해야 될 것이 GPU 성능과 가속화이다. 그런 Property를 사용할 때 생기는 성능 병목현상을 최소화 하기 위해서 특정 브라우저에만 현재 지원하고 있지만 해결방법으로 `Will - Change` 속성이 있다.

GPU, CPU, 하드웨어 가속

하드웨어 가속은 그래픽 처리 장치(GPU)를 이용하여 중앙 처리 장치(CPU)의 처리량을 줄이고, 브라우저의 렌더링을 효율화하는 것을 말한다.

CSS 작업 중에 이러한 하드웨어가속을 통해서 렌더링을 좀 더 빠르게 할 수 있다.

하드웨어가속(GPU 가속)으로 페이지를 출력할 경우 레이어라고 하는 개념을 사용한다. 

페이지에 있는 엘리먼트에 어떠한 지시(예를 들어 3D transforms)를 내리면 그 엘리먼트는 자신의 "레이어"에 분류되고 페이지에 있는 다른엘리먼트와 독립적으로 렌더링 된다. 그 뒤, 페이지 내에서 다시 합쳐진다. (즉, 화면 위에서 그려진다). 

3D transform만 적용되는 방법이고, 자동으로 transition, transfrom, animation 속성이 자동으로 GPU 가속이 활성화 되는 것은 아니다. 

2차원 공간에서 애니메이션되는 엘리먼트에 아래와 같은 단순한 CSS 코드 만으로도 하드웨어 가속을 할 수 있다.

transform: translate3d(0, 0, 0);

이 결과물로 합성 레이어라는 것이 생성된다. 

레이어 생성을 증가시키는 위와 같은 CSS 핵을 대체할 수 있는 속성이 바로 

Will-Change다.

will-change를 사용해서 앞으로 일어날 변경점들을 브라우저에게 알려주고 대상이 되는 엘리먼트에 아래와 같이 CSS 코드를 작성한다.

will-change:transform;

will-change:transform, opacity;

하지만 고려해야 할 점들이 있다.

1. 너무 많은 속성과 엘리먼트에 will-change를 사용하지 말아라.

ex)

*,

*::before,

*::after {

will-change:all;

}

위 코드는 실제로는 아주 효과가 없다. 브라우저는 이미 많은 최적화 도구들로 최적화를 실행하고 있으므로 자원을 대량으로 소비하는 불필요한 행동을 할 필요는 없다.

2. 브라우저에 충분한 시간을 둔 뒤에 사용하라

will-change가 브라우저에게 알려주는 것은 현재일어날 변화가 아닌 미래에 일어날 변화 이다. 

즉, 변화가 생기기 직전 속성에 will-change 옵션을 줘도 아무런 효과가 없다는 뜻이다.

ex)

.element:hover {

will-change : transform;

transition: transform 2s;

transform: rotate(30deg) scale(1.5);

}

hover 효과에 대한 일을 알려주는 것은 이미 일어난 변화에 관한 최적화이기 때문에 효과가 없다.

더 나은 방법으로 변화가 생길 아주 조금 전에 그 변화를 알려줄 방법을 생각해서 설정하는 것이다.

클릭예제를 보면 200 밀리 세컨드의 시간이 브라우저에게 제공되고 그 동안의 최적화를 할 수 있기 때문에 유효한 최적화가 된다.

ex) 클릭예제

.element {

transition: transform 1s ease-out;

}

.element:hover {

will-change: transform;

}

.element:active {

transform: rotateY(180deg);

}

또 다른 예로는 부모에게 적용해서 시간을 버는 방법이다.

ex)

.element {

transition: transform 1s ease-out;

}

.ancestor:hover .element {

will-change: transform;

}

.element:hover{

transform: rotateY(180deg);

}

3. 변경이 종료되면 will-change를 제거한다.

will-change를 무분별하게 사용하면 자원을 대량으로 소비하는 것이다. will-change는 브라우저가 하는 것보다 훨씬 길게 최적화를 유지한다.

그러므로 JAVA의 Garbage Collector와 같이 쓴 자원은 회수하도록 한다.

style sheet에서 will-change를 삭제할 수 없기 때문에 JS를 사용하여 삭제하는 것을 권장한다.

4. 스타일 시트에서는 will-change를 최소한으로 사용한다.

.sidebar {

will-change:transform;

}

5. will-change 속성

auto, scroll-position, contents를 제공한다

출처 : https://dev.opera.com/articles/ko/css-will-change-property/