CSS animation/ JS animation

• 브라우저의 랜더링 과정은 HTML을 파싱하여 DOM 트리를 만들고, CSS를 파싱하여 CSSOM을 만든 후 이 둘을 결합하여 랜더 트리를 만드는 과정이다. 이 과정에서 특정 요소들은 별도의 레이어로 구성되어 관리되며, 이는 3D 변환, 비디오나 캔버스 태그 사용, CSS 애니메이션 또는 필터 사용, 자식 엘리먼트가 레이어로 구성되어 있는 경우, z-index가 낮은 형제 엘리먼트가 레이어로 구성되어 있는 경우 등에 해당한다.

• 레이어가 나누어지는 이유는 해당 부분만을 별도로 관리하고, 각 레이어의 변경점은 각 레이어만 가지고 있기 때문이다. 이후 레이아웃 변경이 있을 경우 레이아웃 계산을 실행하고, 브라우저에 내용을 반영한 후 렌더 레이어와 렌더 레이어 레이어의 결과물을 합쳐 최종 결과를 만든다.

• CSS 애니메이션과 JS 애니메이션은 브라우저에서 요소를 움직이는 방식에 차이가 있으며, CSS 애니메이션은 transform:translate와 keyframes를 이용해 CPU와 GPU를 번갈아가며 활용할 수 있지만, 상태에 따른 변동이 필요할 때 한계가 있습니다. 반면 JS 애니메이션은 setInterval과 RequestAnimationFrame을 이용해 애니메이션을 만들며, 이는 불필요한 콜스택 증가와 뚝뚝 끊기는 느낌을 줄 수 있지만, requestAnimationFrame을 이용하면 1초에 60프레임을 유지하는 최적화된 애니메이션을 만들 수 있습니다.

• 브라우저의 Layout 계산과 Paint 과정은 비용이 많이 들기 때문에, CSS 애니메이션에서는 되도록이면 GPU를 활용한 composite layer로 처리하는 것이 좋습니다. 예를 들어, top과 left 옵션을 사용하면 CPU를 계속 사용해야 하지만, translateX, translateY 옵션을 사용하면 GPU로 옮겨서 더 빠르고 쾌적한 성능을 보장할 수 있습니다.