합성 애니메이션을 사용한 렌더링 성능 개선

주의: 이 글은 심화 단계의 지식을 다루고 있습니다. TL;DR: Repaint 발생 속성 애니메이션을 Composition만 발생하는 속성으로 변경하여 CPU 자원에 대한 오버헤드를 제거함 렌더링 성능 최적화는 어떻게 접근해야 할까요? 렌더링 과정은 전적으로 브라우저에서 진행되는 것으로, 렌더링 과정 자체를 개선할 수는 없습니다. 따라서, 성능 ‘개선’의 접근 방식은 렌더링 과정 자체의 개선이 아니라 과정 중 병목이 생기는 구간을 줄이는 전략으로 접근해야 합니다. 이 글에서는 DOM트리 파싱 단계의 최적화는 다루지 않고, 스타일 계산과 관련된 최적화에 대해서 다룹니다. - 웹 성능 최적화는 가장 빠른 렌더링 패스를 구현하는 것이 아니다. - 성능을 결정하는 중요한 요소 중 하나는 ‘메인 스레드 점유 여부’이다. - 적용하는 CSS속성에 따라 렌더링 파이프라인에서 다시 진행해야 하는 시작점이 다르고, Reflow → Repaint → Composite순으로 렌더링에 대한 비용이 낮다. (단, 항상 그런 것은 아니며 과도한 레이어 사용은 오히려 레이어 합성의 오버헤드로 인해 병목이 생길 수 있다.) - reflow와 repaint 모두 메인 스레드를 점유하기 때문에 처리 시간이 길어질 경우 유저의 인터랙션 처리에도 영향을 줄 수 있다. - `transform` 이나 `opacity` 속성을 사용하는 애니메이션은 메인 스레드 개입 없이, 복사 된(Commit) 레이어를 사용해서 렌더링하므로 빠르다. - 때로는 복잡한 애니메이션을 구현해나가는 과정에서 reflow나 repaint를 피할 수 없을지도 모른다. 하지만 작은 reflow나 repaint는 성능상의 악영향은 크지 않으면서 원하는 결과물을 쉽게 얻을 방법일 수도 있다. - 모든 성능 개선은 측정하며 진행되어야 한다.