Composite Layer(feat. css, js 애니메이션)

Bitnara Lee·2022년 3월 9일

css, js 애니메이션에 대해 공부하다가 알게 된 사실을 정리해 본다.

브라우저가 콘텐츠를 화면에 나타내기 까지의 과정은 paint까지만 알고 있었는데, (이전포스트)
사실 composite라는 과정이 더 있었다.
이 과정에서 스타일 지정 방식에 따라 화면에 나타낼 요소들이 레이어로 분류되어 계층이 결정되고, 애니메이션을 처리하기 위해 GPU를 이용한다는 사실을 알게 되었다.

또, requestAnimationFrame()의 역활에 대한 정의가 모호했는데 이번 기회에 구체적으로 알게 되었다.

✨ Reflow, Repaint가 일어나면

1. Recalculate Style
요소에 적용할 스타일을 계산.
2. Layout
요소의 레이아웃을 생성. 요소들은 벡터 박스로만 표현된다.
3. Paint
생성된 모든 벡터 박스들을 픽셀로 변환하고.(rasterize: 래스터화) 레이어에 올린다.
4. Composite Layers
생성한 레이어 계층을 합성하고 화면에 나타낸다.(프레임을 그린다)
모든 요소가 고유한 위치(복합 계층)를 갖는 완전한 웹 페이지로 보여진다.

⭐️ Composite Layers

Composite Layers 생성:
CPU가 애니메이션을 처리하기 위해 GPU와 통신하는 단계
각각의 layer를 GPU 메모리에 bitmap 형태의 texture로 저장하고 composition layer 작업시 GPU의 메모리에서 관련 작업 진행

GPU 사용시 주의

메모리를 사용하기 때문에 과용은 좋지 않다.

저사양의 폰에서 하드웨어의 가속은 오히려 성능 저하 유발

⭐️ 브라우저가 별도의 Layer를 구성할 때

앞에서 언급했듯이 Layout 단계에서 style 속성이 무엇이냐에 따라 별도의 layer가 지정되거나 layout계산이 되기도 한다.
나뉜 layer들은 layout의 계산이나 Paint없이 병합을 통해서 새로운 화면을 구상할 수 있다.

이미지 출처: 웹 성능 최적화에 필요한 브라우저의 모든 것

<video> 혹은 <canvas> 태그 사용
3D, 2D transforms, opacity 적용(opacity는 1보다 작아야)
animation 이나 transition 사용
will-change로 opacity, transform, top, left, bottom, right등이 정의된 경우
iFrame일 경우
flash와 같은 일부 플러그인
backface-visibility 가 hidden일 경우

⭐️ Layout을 유발하는 스타일/메소드

부드러운 애니메이션 동작을 위해 가능한 동작 전, 후에 미리 작업하거나 layout을 유발하지 않는 스타일을 사용하는 것이 좋다.(위 참고)

Element : clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth
Position : left, top, position, float
BOX, Border : height, width, padding, margin, display, border-width, border
Range : getBoundingClientRect(), getClientRects()
Window : getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

🔸 ex) 움직이는 사각형 애니메이션 구현 시 (좌측 상단에서 우측 하단으로)

애니메이션 페이지

< CSS 애니메이션 >

transform(translate): 컴포지터 쓰레드에서 Composite layer 작업만 수행.
-> 해당 요소가 새 레이어로 생성됨(UI 요소의 애니메이션과 아닌 일부를 나눠, 다시 렌더링 하지 않기 위함)
-> GPU는 이 렌더링 객체 트리를 메모리에 유지하고, 다시 렌더링 하지 않는 레이어를 위에 얹을 수 있다.

#animate {
 animation: playAni 4s;
}
@keyframes playAni{
from{
   transform: translate(0,0);
}
to{
   transform: translate(350px,350px);
 }
}

GPU에서 애니메이션을 처리하므로 메인 스레드를 자유롭게 유지할 수 있다.
웹 페이지의 성능을 향상 시키고, 메인 스레드는 렌더링 레이아웃에 집중할 수 있게 된다

top/left: 메인 스레드에서 Layout, Painting, Recalculating Style을 계속 수행
-> 동일한 레이어를 반복해서 렌더링
-> repaint, composite 작업이 다시 발생

#animate {
 animation: playAni 4s;
}
@keyframes playAni{
from{
   left: 0;
   top: 0;
}
 to{
    left: 350px;
    top: 350px;
 }
}

레이어 분리가 되지 않고 reflow가 반복되어 웹 페이지 성능 최적화에 좋지 않다.

< JS 애니메이션 >

function playAni() {
  let elem = document.getElementById("animate");   
  let pos = 0;
  let id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }
}

마찬가지로 reflow가 반복되어 웹 페이지 성능 최적화에 좋지 않다.(해결책 - 밑 참고)

🔸 CSS 애니메이션 vs JS 애니메이션

CSS 애니메이션

미디어 쿼리로 애니메이션을 적용하여 반응형 애니메이션 구현 가능
외부 라이브러리가 필요하지 않다.
CSS자체가 선언형이기 때문에 어떤요소가 애니메이션을 가져아한다는 직관적인 표현 가능
메인 쓰레드가 아닌 별도의 컴포지터 쓰레드(Compositor Thread)에서 그려지기 때문에 메인 쓰레드에서 작업하는 JS보다 효율적이다.
모든 동작을 CSS에서 관리
구 버전의 브라우저에서는 지원을 하지 않는 경우가 있다.(특히, IE) -> 크로스 브라우징 이슈

JS 애니메이션

크로스 브라우징 이슈가 없다. 렌더링 엔진의 경우 브라우저 마다 달라 구현이 안되는 경우들이 있는데 JS 애니메이션은 호환성에 구애받지 않는다.
GPU를 통한 하드웨어 가속을 제어할 수 있다. CSS 애니메이션의 경우 특정 속성에 의한 GPU가속이 됨으로서 저사양의 컴퓨팅인 경우에 성능 하락을 발생시킬 수 있으나 이를 막을수 있다.
요소의 스타일이 변하는 순간마다 제어가 가능하기 때문에 애니메이션의 세밀한 구성이 가능해진다.
JavaScript에서는 css, 동작을 모두 관리해야 한다.

CSS로는 마우스 올렸을 때 or 메뉴 버튼 전환 등 간단한 애니메이션 구현을 (주로 transform,opacity 속성 사용),
JS는 CSS로 처리하기에는 훨씬 복잡하고 무거운 애니메이션을 세밀하게 다룰 수 있다.
바닐라 js는 reflow가 반복되기 때문에 부드러운 fps 위해서 RAF(RequestAnimationFrame)을 이용할 수 있다.
또, 외부 라이브러리인 velocity.js, GSAP를 이용하여 편리하게 이용 가능하다.