Leitfaden zur Performance

Schnelles Rendern beginnt vor Canvas2D. Halten Sie Daten spaltenorientiert, übertragen Sie sie einmal, vermeiden Sie Decodierung im Hauptthread und lassen Sie das Chart nur die auf dem Bildschirm sichtbaren Details rendern.

LOD steht für Detailstufe: Der Renderer verwendet eine bildschirmgroße Repräsentation großer Datenmengen und gibt bei Vergrößerung feinere Details frei. Beginnen Sie mit der automatischen Worker‑Auswahl und der standardmäßigen LOD‑Policy, messen Sie dann die tatsächliche Arbeitslast. Verwenden Sie das LOD‑Kalibrierungslabor nur, bevor Sie Dichte, Rebase‑Verhältnis oder Quantisierung ändern.

Empfohlene Lade-Pipeline

1. Zeigen Sie eine kleine, Extrema-erhaltende Vorschau, wenn die Latenz bis zum ersten Frame wichtig ist.
2. Starten Sie das Netzwerk-Fetch und die Dekodierung in einem dedizierten Daten-Worker.
3. Lesen Sie nur die benötigten Spalten und Bereiche aus einem spaltenorientierten Format.
4. Validieren Sie ausgerichtete Längen, endlich 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-Ranges unterstützt und Zwischen-Caches diese bewahren; ein korrekter Full-Download-Fallback kann für mobile Besucher dennoch zu teuer sein.

Halten Sie das anfängliche Bundle klein

• Importieren Sie schwere Daten-Decoder und optionale Demos dynamisch.
• Mounten Sie nur das Diagramm, das aktuell sichtbar oder ausgewählt ist.
• Liefern Sie nicht Millionenzeilen-Demodaten auf einer Landingpage aus, nur um zu beweisen, dass der Renderer sie akzeptieren kann.
• Halten Sie Themenkataloge und sekundäre Beispiele aus einem geschützten First-Frame-Pfad heraus.
• Bevorzugen Sie kuratierte oder adaptive Beispiele auf beschränkten Geräten und verlinken Sie zu einer vollständigen Workbench.

Wählen Sie den Worker‑Modus

Verwenden Sie renderMode: "auto" in allgemeinen Anwendungen und messen Sie den aufgelösten Modus. Der Main‑Thread‑Modus ist nützlich für Tests und kleine statische Charts, aber große interaktive Datensätze sollten normalerweise in einem Worker ausgeführt werden.

Passen Sie die Liniendarstellung an die Arbeitslast an

Die meisten Anwendungen benötigen keine benutzerdefinierten LOD‑Werte.

lod.density ist die primäre Steuerung für Fidelity/Work. Beginnen Sie bei 0.75. Erhöhen Sie diesen Wert, wenn lokale Details sichtbar unzureichend sind und die Frame‑Zeit komfortabel bleibt. Verringern Sie ihn bei mehrstufigen gefüllten Bereichen, hohen device‑pixel‑Ratios oder in 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‑Wechsel, machen Hierarchie‑Abfragen jedoch häufiger. Stimmen Sie die Werte bei realen Zoom‑Gesten ab und vergleichen Sie dann die steady‑state Frame‑Zeit, Abfrage‑Besuche, präsentierte 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 Telemetriedaten nutzt.

Updates bündeln

• Verwenden Sie Bulk-APIs für typisierte Arrays, wenn bereits eine vollständige Charge vorliegt.
• Verwenden Sie batch() für mehrere synchrone imperativer Änderungen, die durch eine einzige UI-Aktion verursacht werden.
• Vermeiden Sie das Erzeugen von Arrays oder das Formatieren von Strings innerhalb von Callback-Funktionen, die pro Frame aufgerufen werden.
• Drosseln Sie Anwendungsseitige Streaming-Neuerstellungen und ignorieren Sie veraltete asynchrone Ergebnisse.

Die Streaming-LOD-Builder der Chart führen schnappschussbasierte Arbeit aus, während neue Samples eintreffen, und halten fertige Level nutzbar, bis ein Ersatz bereit ist. Setzen Sie Streaming nicht zurück und ersetzen Sie nicht bei jeder Beobachtung das gesamte Dataset; hängen Sie stattdessen über die streaming APIs an. Line-Streaming aktualisiert Grenzen inkrementell, anstatt bei jedem Anfügen den gesamten Puffer neu zu scannen.

Framework‑Adapter erfassen Statistiken nur, solange ein Callback oder ein aktiver Listener sie empfangen kann. Vue stoppt die Erfassung, nachdem ein einzelner .once‑Listener verbraucht wurde; Angular stoppt ebenfalls, wenn Subscriptions enden oder die Ausgabe geschlossen wird. Entfernen Sie Telemetrie‑Listener, sobald die Anwendung deren Messwerte nicht mehr verwendet.

Bewahren Sie die Datensignifikanz

Leistungsreduktionen müssen Extrema und echte Lücken erhalten. Averagen Sie niemals vorab eine Bereichshülle, verbinden Sie keine fehlenden Intervalle und sampeln Sie nicht jedes Eingabesegment für gestapelte Flächen unabhängig herab. Für OHLCV aggregieren Sie open zuerst, high als Maximum, low als Minimum, close zuletzt und Volumen als Summe über die tatsächlichen Beobachtungen.