Performance-Leitfaden

Schnelles Rendern beginnt vor Canvas2D. Halten Sie Daten spaltenbasiert, übertragen Sie sie einmal, vermeiden Sie Dekodierung im Hauptthread und lassen Sie das Chart nur die sichtbare Darstellung rendern.

Beginnen Sie mit der automatischen Worker-Auswahl und der Standard-LOD-Policy, messen Sie dann die tatsächliche Arbeitslast. Verwenden Sie das LOD calibration lab, bevor Sie Dichte, Rebase-Verhältnis oder Quantisierung ändern.

Empfohlenes Lade-Pipeline

1. Zeigen Sie eine kleine extrema-erhaltende Vorschau, wenn die Latenz bis zum ersten Bild wichtig ist.
2. Starten Sie Netzwerkabruf und Dekodierung in einem dedizierten Daten-Worker.
3. Lesen Sie nur die benötigten Spalten und Bereiche aus einem spaltenbasierten Format.
4. Validieren Sie ausgerichtete Längen, endliche, geordnete X-Werte, Einheiten und deklarierte Lücken.
5. Übertragen Sie typisierte Spalten einmal an den Chart-Renderer.
6. Beenden Sie den Daten-Worker nach der Übertragung, damit er keine weitere Kopie behält.

Bei HTTP-Range-Reads stellen Sie sicher, dass der statische Host Byte-Range-Anfragen unterstützt und dass Zwischen-Caches diese bewahren. Ein korrektes Full-Download-Fallback kann für mobile Besucher dennoch zu teuer sein.

Halten Sie das Initial-Bundle klein

• Importieren Sie schwere Daten-Decoder und optionale Demos dynamisch.
• Mounten Sie nur das aktuell sichtbare oder ausgewählte Chart.
• Liefern Sie nicht Millionen-zeilige Showcase-Daten auf einer Landingpage nur um zu beweisen, dass der Renderer sie annehmen kann.
• Halten Sie Themenkataloge und sekundäre Beispiele außerhalb eines geschützten First-Frame-Pfads.
• Bevorzugen Sie kuratierte oder adaptive Beispiele auf eingeschränkten Geräten und verlinken Sie zu einer vollständigen Werkbank.

Wählen Sie den Worker-Modus

Verwenden Sie renderMode: "auto" in allgemeinen Anwendungen und messen Sie den ermittelten Modus. Der Hauptthread-Modus ist nützlich für Tests und kleine statische Charts, aber große interaktive Datensätze sollten normalerweise in einem Worker laufen.

Feinabstimmung der Linienpräsentation nach Arbeitslast

lod.density ist die primäre fidelity/work-Steuerung. Beginnen Sie bei 0.75. Erhöhen Sie sie, wenn lokale Details sichtbar unzureichend sind und die Frame-Zeit komfortabel bleibt. Verringern Sie sie bei mehrstufigen gefüllten Bereichen, hohen Gerät-Pixel-Ratios oder Browsern, in denen die Canvas2D-Fill-Kosten dominieren.

Die Glätte der Darstellung hängt von rebaseRatio und quantizationStep ab, nicht nur von der Dichte. Feinere Werte reduzieren einzelne Texture-Änderungen, machen Hierarchieabfragen aber häufiger. Stimmen Sie die Einstellungen an realen Zoom-Gesten ab und vergleichen Sie die steady-state Frame-Zeit, Abfragebesuche, Präsentations-Vertices und visuelle Stabilität.

Verwenden Sie setStatsCallback vorübergehend während der Entwicklung:

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

Deaktivieren Sie den Callback in der Produktion, wenn die Anwendung keine Telemetrie konsumiert.

Batch-Updates

• Verwenden Sie Bulk-Typed-Array-APIs, wenn ein kompletter Batch bereits existiert.
• Verwenden Sie batch() für mehrere synchrone imperative Änderungen, die durch eine UI-Aktion ausgelöst werden.
• Vermeiden Sie das Erstellen von Arrays oder das Formatieren von Strings innerhalb von Per-Frame-Callbacks.
• Debouncen Sie anwendungsseitige Streaming-Rebuilds und ignorieren Sie veraltete asynchrone Ergebnisse.

Bewahren Sie die Bedeutung der Daten

Leistungsreduktionen müssen Extrema und reale Lücken erhalten. Aggre-gieren Sie niemals einen Bereich als Vor-Mittelwert, verbinden Sie fehlende Intervalle nicht und downsamplen Sie nicht jede gestapelte Flächen-Eingabe unabhängig. Für OHLCV aggregieren Sie open-first, high-maximal, low-minimal, close-last und das Volumen summiert über tatsächliche Beobachtungen.