will-change를 이용한 하드웨어 가속

 

하드웨어 가속

 하드웨어 가속은 GPU(그래픽 처리 장치)를 이용하여 CPU(중앙 처리 장치)의 처리량을 줄이고, 브라우저 렌더링을 효율화 하는 것을 말한다. 이미지, 영상 등 그래픽 처리에 대한 부분을 GPU로 분산을 하면 모바일 디바이스와 같은 환경에서 CPU에 부하를 줄일 수 있다.

 하드웨어 가속을 이용하면 렌더링 될 엘리먼트만 가져와 빠르게 렌더링 처리를 할 수 있게 된다(3D transforms만 적용). CSS animation, transform, transition 속성에 자동으로 GPU 가속이 활성화 되지는 않지만 렌더링 처리 능력을 향상시킬 수 있는 몇가지 속성이 구현되어 있다.

 docs에 나와있듯 will-change css 속성은 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공한다. 그래서 브라우저는 미리 변화에 대해 적절한 최적화를 수행한다. 이러한 방법은 잠재적으로 성능 비용이 큰 작업을 미리 실행하여 반응성을 높일 수 있다.

css will-chnage

 

will-change 속성

will-change: auto;
will-change: scroll-position;
will-change: contents;

will-change: transform;
will-change: left, top;

<animatealbe-feature>
scroll-position //스크롤 위치의 변경에 대한 기대
contents 	//요소 내용에 대한 변경에 대한 기대
<custom-ident>  //주어진 이름의 속성 변경에 대한 기대

 

 

will-change 사용 예시

$('#'+divId).css('will-change', 'left, top'); // 동작이 실행되기 전 미리 부여해준다

$('#'+divId).css('will-change', 'auto'); // 동작이 끝나면 반드시 초기값으로 돌려준다.

 

will-change 사용 시 주의사항

1. 너무 많은 속성이나 요소에 적용하면 안된다.

 브라우저는 이미 최적화하도록 노력하는 중으로 will-change 요소는 최적화를 위해 많은 자원을 소모하므로 과도한 사용은 오히려 성능을 저하시킬 수 있다.

 

2. 무분별한 사용 금지

 2-1. 사용하고 나면 반드시 기본 상태로 돌려야한다.

 브라우저는 최적화를 실시하고나면 다시 원래 상태로 돌아와야 하는데 will-change를 사용하면 최적화 자원을 길게 유지하므로 변경이 종료되면 반드시 삭제해야한다.

 2-2. 변화가 없는 요소에 사용하지마라.

 

3. 발생 직전에 사용하면 효과가 없다.

 최적화할 시간을 미리 주어야 한다.

4. 원래 잘 동작하던 동작은 사용하지 않는게 좋다.

 조금 더 빨리하기 위해 wil-change를 사용하면 과도한 메모리 사용과 더 복잡한 렌더링으로 성능이 저하될 수 있다.

 

5. 스크립트로 사용하고 style 시트에 적용하지 않는 것을 추천한다.

 

참고자료

https://developer.mozilla.org/ko/docs/Web/CSS/will-change

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

https://caniuse.com/will-change

오늘도 감사합니다.