[클립북] CSS 애니메이션 최적화

목표 :

1. 자연스러운 애니메이션

2. 속도

 

1. 자연스러운 애니메이션

1-1). will-change(CSS)

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

- mozilla -

1-2). CPU, GPU, 하드웨어 가속

하드웨어 가속은 그래픽 처리 장치(GPU)를 이용하여 중앙 처리 장치(CPU)의 처리량을 줄이고, 브라우저의 렌더링을 효율화하는 것을 말한다. CSS 작업에 하드웨어 가속을 활성화하면, 작업 처리가 빨라져서 웹페이지의 렌더링을 보다 빠르게 할 수 있다.

 

- 결과

will-change 속성을 사용하면 엘리먼트의 변경이 시작되기 전에 적절히 최적화할 수 있다. 즉, 페이지 출력에 악영향을 줄 수 있는 처리 비용을 감소하여 효율적으로 엘리먼트의 변경 또는 렌더링을 처리할 수 있고 페이지는 순식간에 갱신돼 부드러운 화면 처리가 가능하게 된다.

CSS 3D Transforms를 예로 들어보겠다. 「CPU, GPU, 하드웨어 가속」절에서 말했듯이 이 속성을 어느 특정 엘리먼트에 사용하면 그 엘리먼트와 컨텐츠는 레이어로 관리되고 나중에 다시 합쳐진다. 새로운 레이어로 엘리먼트를 분리하는 것은 비교적 많은 자원이 필요한 작업이다. 따라서 애니메이션에 몇 분의 1초 단위의 눈에 띄는 지연 현상(버벅임, 깜빡임 등)이 발생한다.

 

1-3). 주의사항

1). 너무 많은 속성이나 엘리먼트에 will-change를 사용하지 않는다.

=> 하드웨어 가속을 통해 특정 애니메이션에 퍼포먼스를 순간 적으로 극대화 하기 때문에 많이 사용할 경우 상당한 브라우저 성능 저하를 초래한다.

2). 브라우저에 충분한 시간을 준다.

=> 인식 시간은 브라우저 성능에 따라 다르지만 일반적으로 약 90ms ~ 300ms 정도가 소요된다. 따라서 브라우저가 인식할 수 있는 충분한 애니메이션 딜레이, 애니메이션 타임을 주는 것이 좋다.(너무 빠르면 적용이 안됨)

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

=> will-change는 지정한 속성의 애니메이션(변형)이 종료되면 즉시 CSS를 제거하거나 auto로 지정해준다. 지속적으로 사용될 경우 주변에 다른 애니메이션에 영향을 미치며, 포퍼먼스의 문제를 이야기 한다.

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

=> 과한 사용은 결국 성능 최적화와 반대로 성능의 문제를 발생시킨다. 다수의 타겟에 최적화는 결국 퍼포먼스 하향의 지름길이다.

 

1-4). rotate(0.0001deg);

translate3d(0 , 0, 0); 옵션의 브라우저마다 계산로직의 버그로 CSS의 cubic-bezier를 커스텀하여 최적화 하여도 모션의 버벅임을 완전히 해소할 수 없다. 전반적으로 이 특별한 문제를 해결하고자 rotate(0.0001deg)를 적용하고, 변경사항을 확인해 본 결과 이전보다 확실히 좋아진 것을 확인하였다.

단, 위 방법은 임시방편일뿐 결국 최적화를 위한

 

Reflow와 Repaint를 최적화 하는 방법을 더욱 더 연구해야 한다.

 

1). Reflow 발생 :

• 노드의 추가 또는 제거 시. 
• 요소의 위치 변경 시. 
• 요소의 크기 변경 시.(margin, padding, border, width, height, ...) 
• 폰트 변경 과(텍스트 내용) 이미지 크기 변경 시.(크기가 다른 이미지로 변경 시) 
• 페이지 초기 랜더링 시.(최초 Layout 과정) 
• 윈도우 리사이징 시.

2). Repaint 발생 :

• background-color 변경 시.
• visibillty 변경 시
• outline 변경 시

2. 속도

2-1). will-change 제어(해지)

animationEnd 이벤트에 반드시 willChange = "auto"를 적용하여 해지한다.

해지하지 않을 경우 더욱 심한 자원 사용으로, 버벅임과 깜빡임 등을 경험하게 될 것이다.

var el = document.getElementById('element');

// 요소가 hover 상태일 때 will-change 설정
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  // 애니메이션 키프레임 단락 내에서
  // 변경될 예정인 최적화 가능한 속성들
  this.style.willChange = 'transform, opacity';
}

function removeHint() {
  this.style.willChange = 'auto';
}

 

2-2). 중복발생 방지

클릭의 중복 방지(이벤트 버블 방지)를 적용한다.

animationEnd 이벤트가 적용되어 시작한 모든 이벤트가 종료된 시점에서만,

새로운 이벤트를 시작할 수 있도록 중복 이벤트 처리를 적용한다.