Worker, 메인 스레드, 그리고 렌더링

Sixtyfold에는 하나의 TypeScript 렌더링 설계가 있으며 세 가지 호스트가 있습니다: OffscreenCanvas Worker, 비동기식 메인 스레드 어댑터, 그리고 서버측 렌더링 진입점. Canvas2D가 유일한 그래픽 백엔드입니다.

렌더러 선택은 LineChartOptions 및 StockChartOptions의 일부입니다. 결정된 모드는 chart.getRenderMode()에서 확인할 수 있습니다.

자동 선택

renderMode: "auto"은 브라우저가 Worker, OffscreenCanvas 및 캔버스 전달을 지원할 때 Worker를 선호합니다. 이러한 기능이 없거나 제한적 콘텐츠 보안 정책 등으로 Worker 생성이 동기적으로 차단되면 메인 스레드로 폴백합니다.

const chart = new LineChart(canvas, { renderMode: "auto" });
await chart.initialize();

console.log(chart.getRenderMode()); // "worker" or "main"

renderMode: "worker"은 약속이 아니라 선호를 표현합니다; Worker 렌더링을 시작할 수 없을 때는 여전히 폴백합니다. 텔레메트리 및 지원 정보를 위해 getRenderMode()을 사용하세요.

Worker 모드

Worker 모드는 캔버스와 대용량 타입드 배열 버퍼의 제어를 이전합니다. 계층 구조 구성, 컬링, 레이아웃 및 렌더링이 브라우저의 UI 작업을 차지하지 않으므로 수백만 점의 대화형 차트에서는 선호되는 경로입니다.

사용자 정의 툴팁 렌더링과 같은 메인-스레드 콜백은 Worker 상태에 직접 접근하는 대신 간결한 렌더러 메시지를 수신합니다. 콜백은 결정적이고 빠르게 유지하세요.

메인-스레드 모드

테스트 환경, 전송 가능한 캔버스가 없는 브라우저, Worker를 금지하는 엄격한 호스트, 또는 통합의 단순성이 UI-스레드 격리보다 중요한 소규모 정적 차트에는 renderMode: "main"를 사용하세요.

메인 스레드 어댑터는 렌더러 메시지를 의도적으로 비동기 방식으로 전달합니다. setData를 호출했다고 첫 프레임이 동기적으로 완료되었다고 가정하지 마십시오; 프레임 완료가 중요할 경우 통계나 애플리케이션 수준의 준비 UI를 사용하십시오.

릴리스 검사에서는 Chromium, Firefox, 그리고 WebKit에서 메인 스레드 경로와 프로덕션 기본 auto 경로를 통해 Line 및 Stock을 점검합니다. 가능 엔진에서는 auto이 OffscreenCanvas Worker로 해결됩니다. 강제 Worker 계약은 Chromium에서도 실행됩니다. 이는 호환성을 검증하는 것이며 장치 독립적인 프레임률 보장은 아닙니다.

크기 지정 및 DPR

캔버스의 CSS 폭과 높이는 레이아웃을 통해 설정하십시오. Sixtyfold Charts는 요소 크기와 장치 픽셀 비율 변화를 관찰한 후 백업 스토어와 렌더러 레이아웃을 업데이트합니다. resize()는 호스트가 즉시 관찰할 수 없는 방식으로 레이아웃을 변경할 때에도 계속 사용 가능합니다.

반응형 차트에는 캔버스의 backing-store 값인 width 및 height 속성만 설정하지 마십시오. Sixtyfold Charts의 공개 크기 및 스타일 필드는 CSS 픽셀을 사용합니다.

콘텐츠 보안 정책

운영 환경에서의 제한적인 정책에는 일반적으로 다음이 필요합니다:

default-src 'self';
script-src 'self';
worker-src 'self';
img-src 'self' data: blob:;
connect-src 'self';

이 예시는 그대로 복사하지 말고 애플리케이션에 맞게 조정하십시오. 원격 오버레이 이미지는 img-src에 출처가 있어야 하며 호환되는 CORS 응답 헤더가 필요합니다.

가시성 및 정리

브라우저 차트는 표시되지 않을 때 불필요한 작업을 일시중지하거나 회피합니다. 선택적 Safari 유지 활성화 간격은 기본적으로 비활성화되어 있으며 대상 Safari 버전에서 자원 회수를 재현한 후에만 활성화해야 합니다.

캔버스를 영구적으로 폐기하기 전에 항상 destroy()을 호출하세요. 단일 페이지 애플리케이션에서는 프레임워크 정리 훅이 올바른 위치입니다.