Worker、メインスレッド、レンダリング

Sixtyfoldは1つのTypeScriptレンダリング設計を持ち、ホストは3種類：OffscreenCanvas Worker、非同期のメインスレッドアダプタ、サーバーサイドレンダリングのエントリポイントです。グラフィックスバックエンドはCanvas2Dのみです。

レンダラーの選択は LineChartOptions と StockChartOptions に含まれます。実際のモードは chart.getRenderMode() で取得できます。

自動選択

renderMode: "auto"はブラウザがWorker、OffscreenCanvas、およびキャンバス転送をサポートする場合にWorkerを優先します。これらの機能が欠けているか、制限の厳しいContent Security Policyなどで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 で Line と Stock のメインスレッド経路と既定の auto 経路を実行します。対応エンジンでは auto が OffscreenCanvas Worker を使用します。強制 Worker 契約も Chromium で検証します。これは互換性の検証であり、端末に依存しないフレームレートを保証するものではありません。

サイズ指定とDPR

キャンバスのCSS幅と高さはレイアウトを通して設定してください。Sixtyfoldは要素サイズとデバイスピクセル比の変更を監視し、バックイングストアとレンダラーのレイアウトを更新します。ホストが即時に観測できない方法でレイアウトを変更してもresize()は利用可能なままです。

レスポンシブチャートではキャンバスのwidthとheight属性のみを設定することは避けてください。これらの属性はバックイングストアの値であり、Sixtyfoldの公開サイズとスタイリングフィールドはCSSピクセルを使用します。

コンテンツセキュリティポリシー

制限の厳しい本番ポリシーでは一般に次が必要です：

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

この例はそのままコピーするのではなくアプリケーションに合わせて調整してください。リモートのオーバーレイ画像はimg-srcにそのオリジンを含み、互換性のあるCORSレスポンスヘッダが必要です。

可視性とクリーンアップ

ブラウザ上のチャートは表示されていないときに不要な作業を一時停止または回避します。オプションのSafariキープアライブ間隔はデフォルトで無効であり、ターゲットのSafariバージョンでリソース回収を再現してからのみ有効にすべきです。

キャンバスを恒久的に破棄する前に必ずdestroy()を呼んでください。シングルページアプリケーションではフレームワークのクリーンアップフックが適切な場所です。