Skip to content

c3 케이스별 성능측정

Jump to bottom
Yongku cho edited this page May 11, 2020 · 18 revisions

카테고리별 케이스 정리

데이터량 표시방법 갱신방법 차트종류(논외)
1만개 모두그리기 unmount => mount SVG
2만개 일부 그리고 인터렉션 처리 데이터만 갱신 Canvas
...10만개 - - -

파일 네이밍

  • [데이터량]-[표시방법]-[갱신방법].js
    • [데이터량]: 1, 2으로 만 단위
    • [표시방법]: all, part
    • [갱신방법]: unmount, reload

샘플 만들기

저장소: https://github.com/ChoDragon9/one-piece/tree/master/0%20study/c3

  • [DONE] 모두 그리기 모듈 만들기
  • [DONE] 일부 그리고 인터렉션 처리 모듈 만들기
  • [DONE] unmount => mount 모듈 만들기
  • [DONE] 데이터만 갱신 모듈 만들기
  • [DONE] 샘플 데이터 만들기
  • [DONE] 케이스 조합 데모 만들기

데모

500

10000

1000단위

Audits 결과

요약

  • 데이터량: 500일 때 정상 동작으로 느껴짐. 10000 일때 많이 느림.
  • 표시방법에 따른 차이
    • 차이가 없다고 느껴짐
    • DOM 갯수 동일함
  • 갱신방법에 따른 차이
    • 데이터만 갱신하는 게 훨씬 빠름

논외

chartJs

Clone this wiki locally