react-wasm-table
  • 한국어

      • 벤치마크

      비교 대상

      react-wasm-table@tanstack/react-table
      렌더링Canvas (WASM)DOM + @tanstack/react-virtual
      행 처리전체 데이터 메모리, 코어에서 가상화DOM에서 가상 스크롤
      동일 데이터✓ generateEmployees(N)✓ 동일

      측정 방법

      1. 동일한 generateEmployees(N) 데이터를 생성합니다.
      2. react-wasm-table만 마운트하여 첫 페인트까지 시간을 측정합니다.
      3. 언마운트 후 200ms 대기, @tanstack/react-table만 마운트하여 동일하게 측정합니다.
      4. 결과 테이블과 바 차트로 비교합니다.

      빠른 이유

      • Canvas — 셀당 DOM 노드 없음; 하나의 캔버스가 보이는 영역만 그림.
      • Rust/WASM — 레이아웃(Taffy), 히트 테스트, 스크롤 연산이 WebAssembly에서 실행.
      • 가상화 — 보이는 행만 레이아웃·그리기하고, 나머지는 JS 메모리에만 유지.