성능 안내서

빠른 렌더링은 Canvas2D 이전에 시작됩니다. 데이터는 열형(columnar)으로 유지하고 한 번만 전송하며 메인 스레드에서 디코딩하지 마세요. 차트는 화면에 보이는 상세 정보만 렌더링하게 하세요.

LOD는 상세도(level of detail) 를 뜻합니다: 렌더러는 대용량 데이터를 화면 크기 표현으로 사용하고 사용자가 확대할수록 더 세부적인 정보를 드러냅니다. 먼저 Worker 자동 선택과 기본 LOD 정책으로 시작한 뒤 실제 작업량을 측정하세요. 밀도, 리베이스 비율 또는 양자화(quantization)를 변경하기 전에는 LOD calibration lab]만 사용하세요.

권장 로딩 파이프라인

첫 프레임 지연이 중요할 때는 극값을 보존하는 작은 미리보기를 표시하세요.
전용 데이터 Worker에서 네트워크 페치와 디코딩을 시작하세요.
컬럼형 포맷에서 필요한 컬럼과 범위만 읽으세요.
정렬된 길이, 유한 순서 X, 단위, 및 선언된 간격을 검증하십시오.
타입 지정된 열을 한 번만 차트 렌더러로 전송하십시오.
전송 후 데이터 Worker를 종료하여 복사본을 유지하지 않도록 하십시오.

HTTP 범위 읽기의 경우 정적 호스트가 바이트 범위를 지원하고 중간 캐시가 이를 보존하는지 확인하십시오. 전체 다운로드 대체 전략이 있어도 모바일 방문자에게는 비용이 너무 클 수 있습니다.

초기 번들을 작게 유지하세요

대용량 데이터 디코더와 선택적 데모는 동적으로 임포트하세요
현재 보이거나 선택된 차트만 마운트하세요
렌더러가 이를 처리할 수 있음을 입증하려고 착륙 페이지에 수백만 행의 쇼케이스 데이터를 그대로 배포하지 마세요
테마 카탈로그와 보조 예제는 보호된 첫 프레임 경로에서 제외하세요.
제약된 장치에서는 큐레이션된 또는 적응형 예제를 우선 사용하고 전체 워크벤치로 연결하세요.

Worker 모드를 선택하세요

일반 애플리케이션에서는 renderMode: "auto"를 사용하고 해결된 모드를 측정하세요. 메인 스레드 모드는 테스트나 작은 정적 차트에 유용하지만, 대규모 상호작용 데이터셋은 보통 Worker에서 실행해야 합니다.

작업 부하에 따라 선 표시 조정

대부분의 애플리케이션은 사용자 정의 LOD 값이 필요하지 않습니다.

lod.density는 기본적인 충실도/작업 제어입니다. 0.75에서 시작하세요. 로컬 디테일이 눈에 띄게 부족하고 프레임 시간이 여유가 있을 때 값을 높이세요. 멀티패스 채움 범위, 높은 디바이스 픽셀 비율 또는 Canvas2D 채움 비용이 지배적인 브라우저에서는 값을 낮추세요.

표현의 부드러움은 단순한 밀도뿐만 아니라 rebaseRatio 및 quantizationStep에 좌우됩니다. 더 세밀한 값은 개별 텍스처 변경을 줄이지만 계층 쿼리를 더 빈번하게 만듭니다. 실제 확대/축소 제스처로 조정하고 정상 상태 프레임 시간, 쿼리 방문 횟수, 표시 정점 수 및 시각적 안정성을 비교하세요.

개발 중에는 일시적으로 setStatsCallback를 사용하세요:

chart.setStatsCallback((stats) => {
  console.table({
    frame: stats.frameTime,
    mode: stats.presentationMode,
    vertices: stats.presentationVertices,
    visits: stats.presentationQueryVisits,
    ready: stats.lodReady,
  });
}, { intervalMs: 250 });

애플리케이션이 텔레메트리를 사용하지 않는 프로덕션 환경에서는 콜백을 비활성화하세요.

업데이트 일괄 처리

완전한 배치가 이미 존재하는 경우에는 대량 타입화 배열 API를 사용하세요.
하나의 UI 동작으로 인해 발생하는 여러 동기적 명령형 변경에는 batch()을 사용하세요.
프레임당 콜백 내부에서 배열을 생성하거나 문자열을 포맷하는 것을 피하세요.
애플리케이션 측 스트리밍 재구성을 디바운스하고 오래된 비동기 결과는 무시하세요.

데이터의 의미를 보존하세요

성능 감소 시에도 극값과 실제 간극은 유지해야 합니다. 범위 엔벨로프를 미리 평균 처리하거나 누락된 구간을 연결하거나 각 스택형 면적 입력을 독립적으로 다운샘플링해서는 안 됩니다. OHLCV의 경우 실제 관측값을 기준으로 열린값(첫값)은 첫째(open-first), 최고값(maximum)은 최고, 최저값(minimum)은 최저, 종가(close-last)는 마지막, 거래량(volume)은 합계로 집계해야 합니다.