CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용)

4. 인라인 스타일을 최대한 배제합니다.

위의 내용과 중복되며, reflow 비용을 줄이는 것 이외에 코드 가독성도 높일 수 있습니다.

5. 테이블 레이아웃을 피하는 것이 좋습니다.

테이블 레이아웃을 사용하게 되면 테이블 값에 따라 넓이를 계산하므로 랜더링이 느려집니다. 그러므로 꼭 필요한 경우를 제외하고는 테이블 레이아웃을 사용하지 않는 것이 좋습니다. 만약 사용한다면 CSS 속성 table-layout:fixed를 사용하면 랜더링을 조금 더 빠르게 할 수 있습니다.

10×10 테이블

table-layout: fixed 미 적용
table-layout: fixed 적용
table-layout: fixed 미 적용(0.6ms) <  table-layout: fixed 적용(0.4ms)

100×100 테이블

table-layout: fixed 미 적용

table-layout: fixed 적용

table-layout:fixed 미 적용(35.4ms) < table-layout:fixed 적용(27.1ms)

6. CSS 하위선택자는 필요한 만큼 정리하는 것이 좋습니다.

reflow 자체보다는 reflow가 유발시키는 CSS Recalculation에 필요한 내용입니다. CSS 규칙은 오른쪽에서 왼쪽으로 이동합니다. 이 과정에서는 더 이상 일치하는 규칙이 없거나 잘못된 규칙이 나올 때 까지 계속됩니다. 그러므로 불필요한 선택자를 사용하는 것은 성능을 저하시킬 수 있습니다.

<div class="reflow_box">
  <ul class="reflow_list">
    <li>
      <button type="button" class="btn">버튼</button>
    <li>
    <li>
      <button type="button" class="btn">버튼</button>
    <li>
  </ul>
</div>

/* 잘못된 예 */
.reflow_box .reflow_list li .btn{
    display:block;
}
/* 올바른 예 */
.reflow_list .btn {
  display:block;
}

7. 기타방법

아래의 방법은 아직 테스트를 완료하지 못했거나 테스트 결과가 기대했던 결과와 일치하지 않는 방법입니다.
추후 테스트를 완료하는데로 수정하여 올리도록 하겠습니다.

• 테스트 예정
  • IE의 경우 CSS에서의 js 표현식을 피하라
  • 캐쉬를 활용한 reflow 최소화
  • DOM 사용을 최소화하여 reflow 비용 줄이기
• 테스트 결과 불확실
  • position: relative와 top, left 값을 함께 사용 시 주의하자(테스트 결과 불일치)

참고: reflow 과정 최적화, reflow 원인과 마크업 최적화 tip

will-change 검토

will-change란?

will-change는 변화가 예상되는 요소를 브라우저에게 미리 알려줍니다. 브라우저는 실제 요소가 변화되기 전에 적절하게 최적화를 할 수 있습니다. 큰 비용이 드는 변화도 최적화로 인해 페이지의 반응성을 증가시킬 수 있습니다.

will-change의 지원범위

will-change 속성

will-change 속성은 4가지가 있습니다.

will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;
will-change: top, left;

• auto
  • 기본값으로 브라우저는 별다른 최적화를 실시하지 않습니다.
• scroll-position
  • 스크롤 할 때 엘리먼트의 위치가 변경될 것을 알려줍니다. 이 값을 설정하면 브라우저는 스크롤 가능한 엘리먼트를 미리 최적화 하여 랜더링 합니다. 한 번에 많은 양을 스크롤하거나 빠른 스크롤이 필요한 경우에 사용합니다.
• contents
  • 엘리먼트의 컨텐츠가 변경될 것을 알려줍니다. 브라우저는 보통 엘리먼트의 랜더링 결과를 캐싱합니다. 대부분의 엘리먼트가 변경되지 않고 변경되어도 위치가 바뀌는 정도의 미미한 변경만 발생하기 때문입니다. 하지만 엘리먼트가 계속해서 변경되는 경우 브라우저 캐시는 무의미하게 됩니다. 이 속성을 사용하게 되면 캐시를 하지 않고 변경될 때마다 처음부터 랜더링하게 됩니다.
• <custom-ident>
  • 변경하고 싶은 속성을 사용할 수 있습니다. 쉼표(,)를 이용하여 두 개 이상의 속성을 사용할 수 있습니다. 크롬에서는 현재 6가지 속성(opacity, transform, top, left, right, bottom)만 적용됩니다. 참고.

will-change 속성을 사용하면 해당 레이어는 GPU에 업로드 됩니다.
아래의 그림은 빨간색 네모에 마우스를 올리면 will-change 속성이 적용되도록 한 그림입니다. 크롬개발자도구 Layer창에서 보면 GPU에 업로드 시 색깔이 변하는 것을 확인할 수 있습니다.

will-change 사용시 주의할 점

1. 너무 많은 속성과 요소에 will-change 속성을 사용하지 않습니다.

브라우저는 모든 요소에 대해 이미 최적화를 시키려고 시도하고 있습니다. will-change 속성이 사용된 요소는 최적화를 하기 위해 많은 자원을 소모하기 때문입니다.

*,
*:before,
*:after {
    will-change: width, margin, height, top, left, bottom, right, transform, opacity;
}

이 코드는 브라우저가 모든 요소에 대해 최적화를 하여 성능이 크게 좋아질 것으로 생각할 수 도 있지만 실제로 효과가 전혀 없을 수도 있고 성능이 더 안 좋아질 수도 있습니다.

will-change에 모든 속성을 사용했을 때:

will-change를 사용하지 않았을 때:

2. 애니메이션 동작이 끝난 후 기본 상태로 되돌려야 합니다.

브라우저가 변화에 최적화를 시도하면 일반적으로 비용이 발생합니다. 브라우저는 보통 필요한 경우에 최적화를 실시하고 최적화가 필요가 없으면 다시 원래되로 되돌아 옵니다. 하지만 will-change의 경우는 최적화를 길게 유지하게 됩니다. 그러므로 엘리먼트에 변경이 종료되면 반드시 will-change를 삭제해야 합니다. 그러면 will-change에 사용하고 있던 자원을 회수할 수 있습니다.

// 간단한 예제
// 클릭할 때 애니메이션을 재생할 엘리먼트를 선택합니다.
var el = document.getElementById('element');
// 엘리먼트에 마우스 커서가 올라가면 will-change를 설정합니다.
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
    // 애니메이션의 키프레임 블럭을 최적화할 수 있는 속성을 사용합니다.
    this.style.willChange = 'transform, opacity';
}
function removeHint() {
    this.style.willChange = 'auto';
}

단, 슬라이드처럼 수초 내에 반드시 변화가 일어나거나 마우스 움직임에 따라 변화가 일어나는 경우는 자바스크립트로 will-change로 삭제하지 않고 스타일시트에 바로 선언해도 문제 없습니다.

.slide {
    will-change: transform;
}

3. 조금 더 빨리 적용하려고 will-change를 사용해서는 안 됩니다.

will-change를 사용하지 않아도 페이지가 잘 작동된다면 will-change를 사용하지 않아도 됩니다. 조금 더 빨리하기 위해 will-change 속성을 추가하면 과도한 메모리 사용과 더 복잡한 렌더링으로 성능이 더 안좋아 질 수 있습니다.

top, left로 이동하는 물고기 100마리

will-change 적용한 top, left로 이동하는 물고기 100마리

4. 브라우저에게 미리 will-change 사용을 알려주어야 합니다.

변화가 일어날 요소에 will-change를 직접 선언하면 적용이 되지 않습니다.

/* 변화할 요소와 will-change가 같이 있으므로 적용이 안 됨 */
.box {
    transform: rotate(180deg);
    transition: transform 1s linear;
    will-change: transform;
}

그러므로 선택자 :hover, 자바스크립트 mouseenter 등을 통하여 미리 알려주어야 합니다.

/* hover를 통해서 will-change를 선언 했으므로 적용 */
.box:hover {
    will-change: transform;
}
.box {
    transition: transform 1s linear;
}
.box:active {
    transform: rotate(180deg);
}

성능 개선

1. transform: translateY() + position: absolute 이용?

아래의 애니메이션 처럼 1번과 2번 영역을 나누고 2번 영역이 1번을 덮는 방식으로 진행하면 reflow가 일어나지 않는 속성만을 이용하여 해결할 수 있습니다.

하지만 스크롤 애니메이션 때문에 현재 마크업 구조가 아래의 그림 처럼 나누어져 있어서 적용할 수 없었습니다.

2. will-change 이용?

will-change로 width, margin의 변화를 브라우저에 알리고 싶지만 지원이 되지 않습니다.(적용되는 속성: top, left, right, bottom, opacity, transform)
will-change: width, margin 대신에 will-change:transform 을 적용하면 해당 레이어가 GPU에 업로드 되기는 합니다. 하지만 width, margin 속성 자체가 reflow를 계속해서 발생 시키기 때문에 좋은 방법은 아닙니다.
width변경 속성에 will-change: width 적용 했을 때는 적용하지 않았을 경우와 동일합니다.

width변경 속성에 will-change: transform 적용 했을 때는 GPU 영역에 레이어가 업로드 되나 reflow가 계속 발생합니다.

그리고 지원범위 또한 안드로이드 5이상, IOS 9.3 이상 버전에서만 적용되기 때문에 적용하지 않았습니다.

3. fade in/out 이용!

앞서 말한 속성 5가지 중에 성능에 좋지않은 margin 속성을 사용하지 않았습니다. height 속성은 사용할 수 밖에 없었지만 한번에 확장하도록 바꿈으로써 reflow를 줄였습니다.

• 왼쪽으로 축소: margin(성능 문제) → 제거
• 아래쪽으로 천천히 확장: height(성능 문제) → 아래쪽으로 한 번에 확장
• Fade in / Fade-out: opacity
• ‘X’ 버튼 회전: rotate
• ↑↓’ 버튼 아래쪽으로 이동: translateY

초기 애니메이션보다 현재 애니메이션에서 리플로우가 적게 일어나는 것을 알 수 있습니다.

초기 애니메이션

현재 애니메이션

참고: 현재 지도 애니메이션

결론

초기에 구현하고자 했던 애니메이션은 reflow가 많이 일어나서 성능에 좋지 않았습니다. 그래서 성능 문제를 해결하고자 여러가지 방법을 찾아보았습니다.
만약 구조를 바꿀 수 있었다면 translateY + position: absolute 방법을 이용할 수 있었고, 대응 브라우저 버전이 높았다면 will-change 속성을 사용해서 해결할 수 있었습니다.
하지만 두 방법 모두 적용할 수가 없어서 네이버 지도에서는 fade in/out 애니메이션으로 수정되었으며, 애니메이션 수정으로 reflow 수가 줄어들어 성능을 향상 시킬 수 있었습니다. 성능을 고려한 CSS 애니메이션 개발에 본 글이 도움이 되길 바랍니다.

참고자료

• 애니메이션 성능을 높이는 방법: http://sculove.github.io/blog/2013/12/05/%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%84%B1%EB%8A%A5%EC%9D%84-%EB%86%92%EC%9D%B4%EB%8A%94-%EB%B0%A9%EB%B2%95/
• 브라우저는 어떻게 동작하는가?: http://d2.naver.com/helloworld/59361
• will-change에 대해 알아야 하는 모든 것: https://dev.opera.com/articles/css-will-change-property/
• css will-change: http://maccg.com/2015/04/css-will-change/
• 하드웨어 가속에 대한 이해와 적용: http://d2.naver.com/helloworld/2061385
• 애니메이션 높은 성능: https://www.html5rocks.com/ko/tutorials/speed/high-performance-animations/
• MDN will-change: https://developer.mozilla.org/ko/docs/Web/CSS/will-change
• W3C will-change: https://www.w3.org/TR/css-will-change-1/
• 브라우저 렌더링 reflow & repaint: http://donggov.tistory.com/56
• reflow과정 최적화: http://mohwaproject.tistory.com/entry/ReflowLayout-%EA%B3%BC-Repaint-%EA%B3%BC%EC%A0%95-%EB%B0%8F-%EC%B5%9C%EC%A0%81%ED%99%94
• reflow 원인과 마크업 최적화 tip: https://lists.w3.org/Archives/Public/public-html-ig-ko/2011Sep/att-0031/Reflow_____________________________Tip.pdf
• will-change 적용 범위: https://github.com/operasoftware/devopera/pull/330
• 애니메이션 성능 테스트: http://animation-workshop.herokuapp.com/