211021(목) - 렌더링 성능 개선 with 도넛 차트

목차

• 렌더링 성능 개선 with 도넛 차트
  • 문제
  • 측정하기
  • 분석하기
  • 개선하기
  • 결과

렌더링 성능 개선 with 도넛 차트

문제

배포된 페이지를 Safari로 확인했을 때, Chrome과 다르게 홈페이지 상단 도넛 차트 컴포넌트의 애니메이션이 매끄럽지 않다는 것을 알았다.

Chrome - 정상적인 애니메이션

Safari - 비정상적인 애니메이션

측정하기

react dev tool의 Profiler를 이용해서 홈페이지에서 얼마나 렌더링이 발생하는지 측정했다.

무려 196번이나 렌더링이 발생하고 있었다. 그런데, 홈페이지에 세 개의 도넛 차트가 있었기 때문에 가장 왼쪽에 있는 도넛 차트만 남겨놓은 채 다시 측정했다.

총 93번의 렌더링이 발생하고 있었고, 도넛 차트와 관련된 렌더링의 개수를 세어보니 85번의 렌더링에 관여하고 있었다. 정확한 측정을 위해서 도넛 차트를 제외하고 다시 측정했다.

도넛 차트를 제외하고 14번의 렌더링이 발생하고 있었다.

분석하기

도넛 차트가 관여하는 85번의 렌더링과 14번의 렌더링에는 서로 중복이 발생할 수 있다. 이 둘을 합한 횟수에서 전체 렌더링 93번을 빼면, 6번의 숫자가 나오는데, 이 숫자의 의미는 도넛 차트가 관여한 85번의 렌더링에서 도넛 차트를 빼더라도 필수적으로 6번의 렌더링이 발생한다 것이다. 또, 도넛 차트가 관여된 렌더링 횟수 85번에서 이 횟수 6번을 빼면 79번인데, 이 횟수는 순전히 도넛 차트가 발생시키는 렌더링이라는 의미이다.

79번의 렌더링이 발생하는 이유는 useState에서 찾을 수 있었다. 현재 해당 컴포넌트가 상태 값을 css prop으로 넘겨, conic-gradient의 퍼센트로 사용하고 있는데, 이 값의 변동이 렌더링을 일으키고 있었다. 상태 값은 초깃값 0부터 78.3(10월 21일 기준)보다 작은 경우 하나씩 증가되도록 로직이 구성되어 있어 총 79번 변경되고, 이는 다시 79번의 렌더링을 일으키고 있었다.

개선하기

도넛 차트 컴포넌트의 애니메이션이 현재 useState를 사용해서 구현되어 있는데, 대안으로 바로 떠오른 것은 keyframes였다. keyframes는 거의 모든 브라우저에서 동작하고 (참고), 상태나 prop이 변경되는 것이 아니므로 렌더링을 일으키지 않을 거라고 생각했다. 정확한 확인을 위해 간단하게 구현했다.

keyframes를 사용해서 구현한 후 Profiler로 렌더링 횟수를 측정했다. 이전에 도넛 차트를 제외한 후 측정했을 때와 렌더링 횟수가 동일하다는 것을 확인한 후, 개선을 진행했다.

결과

개선 후 Chrome (사실 얘는 별 차이 없었다)

개선 후 Safari

디자인 개선

chrome에서 봤을 때, 왼쪽이 개선 전의 모습이고, 오른쪽이 개선 후 모습이다. svg를 이용해 컴포넌트를 구현하면서 단면이 깔끔해져, 디자인적으로도 이전보다 나은 결과를 얻을 수 있었다.