animation 최적화

animation 사용시에 css 최적화 하는 방법

1. css핵 (translate Z or translate 3D)사용하기

하드웨어 가속을 활성화하여 대상이 되는 엘리먼트를 빠르게 렌더링 처리하는 방법

하드웨어 가속은 중앙처리장치(CPU)가 하는 일은 그래픽 처리 장치(GPU)가 분담하여 처리해서 컴퓨터의 성능을 최대한 끌어올리고 브라우저 렌더링을 빠르게 할 수 있게 한다.

일반적인 css animation, trnasform, traslation 속성에는 하드웨어 가속이 적용되지 않기 때문에 브라우저를 속여서 강제로 3D 처리를 하도록 브라우저에 지시해 하드웨어를 가속하는 방법

transform: translate3d(0,0,0);
transform: translateZ(0)

하지만 이러한 방법은 RAM이나 그래픽 처리 장치(GPU)의 사용량을 커지게하여 페이지에 병목 현상을 줘서 오히려 악영향을 끼치게 한다.

 

2.will-change

어떤 속성이 변경이 될 것인지 미리 엘리먼트에 적용하여 브라우저가 해당 css를 읽을 때 변경 될 속성을 알게하여 미리 그 변경에 대비할 수 있게 한다.

will-change: auto;		/* 기본 값 */
will-change: scroll-position;	/* 스크롤 위치가 변경 될 예정 */
will-change: contents;		/* 요소의 컨텐츠 내용이 변경 될 예정 */

/* 특정 css 속성 적용 */
will-change: transform;		/* transform 속성이 변경 될 예정 */
will-change: opacity;		/* opacity 속성이 변경 될 예정 */
will-change: left, top;		/* left, top 값이 변경 될 예정 */
will-change: transform, opacity

그렇다고 과다하게 사용하면 안된다. 브라우저는 기본적으로 브라우저가 사용할 수 있는데 최적화를 최대한으로 적용한다. 그리고 브라우저가 적용한 최적화를 삭제하고 가능한한 빨리 브라우저가 처리해야할 다른 작업들을 실행단다. 그런데 will-change를 선언하게 되면 이러한 브라우저의 특성을 무시하고 브라우저가 최적화에 더 많은 시간을 쏟게하여 오히려 브라우저 최적화에 악영향을 끼치므로 정말 필요한 경우에만 적절하게 사용해야 한다.

 

3. 브라우저 렌더링 과정 이해하기

DOM은 HTML 요소를 tree 구조로 만든 것이고 CSSOM은 스타일 요소들을 tree 구조로 만든 것이다.

이 두 가지를 조합해서 최종적으로 Render Tree를 만든다.

  Layout는 브라우저에서 엘리먼트의 도형, 위치를 생성한다. 대표적인 속성값으로 width, height, margin, padding, left,top,rigth,bottom 등이 있다.

  Paint는 각 엘리멘트의 픽셀을 채운다. box-shadow, border-radius, color, background-color 등이 있다.

  Composite은 화면에 모든 레이어를 그리기 시작한다. transform, opacity 가 있다.

이 과정을 Critical Rendering Path, 혹은 Pixel Pipeline이라고 한다.

화면이 변하면 이 과정을 처음부터 다시 수행하는데, 이 변화가 너무 많으면 브라우져가 1초에 60번씩 보여주기 어렵게 된다.

쟁크(Jank)현상

일반적으로 모니터의 주사율은 1초당 60개(60FPS 60프레임) 화면을 보여준다. 이에 맞춰 브라우저도 1초에 60개를 보여주려 한다.
이때 브라우저가 60개를 못보여주고 1초에 20개, 30개 정도만 보여준다면 애니메이션은 버벅거리게 되는데, 이 현상을 Jank(쟁크) 현상이라고 한다.

Reflow

 

width, height처럼 위치나 크기에 관여하는 요소가 변할 때는 layout과 paint를 포함한 브라우저 렌더링 전체 과정이 재실행 된다. 이걸 Reflow라고 한다.

 

Repaint

 

outline, color, background-color 등 색상에 관여하는 요소가 변하면 layout은 생략되고 브라우저 렌더링이 일어난다. 이를 Repaint라고 한다.

 

GPU의 도움을 받아서 Reflow, Repaint 피하기

 

transform과 opacity 가 변경되면 GPU가 관여하면서 layout, paint 과정이 생략된다.

이 두 속성이 변할 때는 GPU가 직접 데이터를 가공해서 composite과정을 거치게 된다.

즉, 결론적으로 애니메이션 효율은 transform, opacity를 이용할 때 가장 빠르고, 그 다음은 색상이 변할 때가 빠르며 마지막으로 위치와 크기가 변할 때 가장 느리다.

 

결론적으로 위치와 크기를 변화 시키는 애니메이션은 transform을 활용하고, 색상을 변화시키는 애니메이션은 opacity를 활용하는 게 가장 효율적이다.

빨강에서 파랑 등 어떤 특정 색상에서 또 다른 색상으로 변하는 애니메이션이 아니라, disabled 등 색상을 흐리게만 해도 되는 상황일 때는 opacity를 활용하는 게 좋겠다.