60FOLDCOMPONENTS

パフォーマンスガイド

大規模データセット向けにデータ読み込みとチャート更新を設計してください。

高速レンダリングはCanvas2Dより先に始まります。データはカラム形式のまま保持し、一度だけ転送し、メインスレッドでのデコードを避け、チャートは画面に表示される詳細のみを描画させてください。

LODは**詳細度（level of detail）**を意味します：レンダラーは大規模データの画面サイズ表現を使用し、ユーザーがズームするとより細かい詳細を明らかにします。まずWorkerの自動選択と既定のLODポリシーで始め、実際の作業負荷を測定してください。密度、リベース比、または量子化を変更する前にのみLODキャリブレーションラボを使用してください。

推奨ロードパイプライン

  1. 初回フレームのレイテンシーが重要な場合は、極値を保持する小さなプレビューを表示してください。
  2. ネットワーク取得とデコードは専用のデータWorkerで開始してください。
  3. 列指向フォーマットから必要な列と範囲のみを読み取ってください。
  4. 整列した長さ、有限で順序付けされた X、単位、および宣言されたギャップを検証してください。
  5. 型付き列を一度だけチャートレンダラーに転送してください。
  6. 転送後にデータWorkerを終了させ、別コピーを保持しないようにしてください。

HTTP の範囲読み取りでは、静的ホストがバイト範囲をサポートし、中間キャッシュがそれらを保持することを確認してください。完全ダウンロードへのフォールバックが正しくても、モバイル訪問者にはコストが高すぎる場合があります。

初期バンドルを小さく保つ

  • 重いデータデコーダーやオプションのデモは動的インポートする
  • 現在表示中または選択されているチャートのみをマウントする
  • レンダラーが受け入れられることを示すためだけに、数百万行のショーケースデータをランディングページに配送してはならない
  • テーマカタログと二次的な例は、保護された最初のフレーム経路から除外してください。
  • リソースが限られたデバイスではキュレーション済みまたは適応的な例を優先し、フルワークベンチへのリンクを提供してください。

Worker モードを選択してください。

汎用アプリケーションでは renderMode: "auto" を使用し、解決されたモードを計測してください。メインスレッドモードはテストや小さな静的チャートに有用ですが、大規模な対話型データセットは通常 Worker で実行するべきです。

ワークロードに応じて線の表現を調整する

ほとんどのアプリケーションはカスタムの詳細度値を必要としません。

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 を使用してください。
  • 1 回の UI 操作で発生する複数の同期的で命令型の変更には batch() を使用してください。
  • フレームごとのコールバック内で配列を構築したり文字列をフォーマットしたりすることは避けてください。
  • アプリ側のストリーミング再構築はデバウンスし、古い非同期結果は無視してください。

チャートのストリーミング LOD ビルダーは、新しいサンプルが到着する間にスナップショットベースの作業を完了し、置換が準備されるまで完了したレベルを使用可能なまま維持します。各観測ごとにストリーミングをリセットしたり完全なデータセットを置き換えたりせず、代わりに streaming APIs を通じて追記してください。ラインのストリーミングは、各追記で完全なバッファを再スキャンするのではなく、境界を増分的に更新します。

フレームワークアダプターは、コールバックまたはアクティブなリスナーがそれらを受け取れる間のみ統計を収集します。Vue は単一の .once リスナーが消費されると収集を停止します。Angular はサブスクリプションの終了や出力のクローズ時にも停止します。アプリケーションがそれらの計測をもはや使用しない場合は、テレメトリリスナーを削除してください。

データの意味を保持する

パフォーマンス低下時にも極値と実際のギャップは保持しなければなりません。レンジ包絡を事前に平均化したり、欠落区間を連結したり、積み上げ面グラフの各入力を独立にダウンサンプリングしたりしてはいけません。OHLCV については、実際の観測に基づいて open は最初、high は最大、low は最小、close は最後、volume は合計で集約してください。