SVG에서 Canvas로 전환한 폴라 시그널의 프로파일러 대시보드, 렌더링 3.6배 빨라져

We rewrote our custom visualisation renderers from SVG to be in Canvas

SVG에서 Canvas로 전환한 폴라 시그널의 프로파일러 대시보드, 렌더링 3.6배 빨라져

폴라 시그널(Polar Signals)이 프로파일링 대시보드의 플레임 그래프 렌더러를 SVG에서 Canvas로 전면 재작성했습니다. SVG는 DOM 노드 수에 따라 성능이 제한되어 수만 개의 프레임을 처리할 때 브라우저에 과부하를 주었지만, Canvas는 즉시 모드 API로 DOM 없이 픽셀을 직접 그려냅니다. 쿼리 결과를 컬럼형 Arrow 포맷으로 제로카피 수신해 렌더링에 필요한 좌표를 미리 계산함으로써, 대형 프로파일 렌더링 시간을 164ms에서 46ms로 3.6배 단축했습니다. 확대/축소, 스크롤 등 상호작용도 4~5배 빨라졌으며, CPU 스로틀링 환경에서도 118fps를 유지합니다. 다만 DOM이 제공하던 히트 테스팅 등은 직접 구현해야 하는 과제가 남았습니다.

Canvas는 브라우저가 당신을 위해 덜 하기 때문에 더 빠릅니다. 즉, DOM이 무료로 해주던 모든 것이 이제 당신의 문제가 되었다는 뜻입니다.