Guide de performance

Un rendu rapide commence avant Canvas2D. Conservez les données en colonnes, transférez-les une seule fois, évitez le décodage sur le thread principal et laissez le graphique ne rendre que la représentation visible.

Commencez par la sélection automatique de worker et la politique LOD par défaut, puis mesurez la charge réelle. Utilisez le LOD calibration lab avant de modifier la densité, le ratio de rebase ou la quantification.

Pipeline de chargement recommandé

Affichez un petit aperçu préservant les extrêmes lorsque la latence de la première image compte.
Lancez la récupération réseau et le décodage dans un data worker dédié.
Ne lisez que les colonnes et plages nécessaires depuis un format columnar.
Validez les longueurs alignées, X ordonné fini, unités et gaps déclarés.
Transférez les colonnes typées au moteur de rendu du graphique une fois.
Terminez le data worker après le transfert afin qu’il ne conserve pas une autre copie.

Pour les lectures HTTP par plages, assurez-vous que l’hébergeur statique prend en charge les byte ranges et que la mise en cache intermédiaire les préserve. Un repli de téléchargement complet correct peut néanmoins être trop coûteux pour les visiteurs mobiles.

Gardez le bundle initial léger

Importez dynamiquement les décodeurs de données lourds et les démos optionnelles.
Montez uniquement le graphique actuellement visible ou sélectionné.
N’envoyez pas des données de démonstration de plusieurs millions de lignes sur une page d’accueil seulement pour prouver que le moteur peut les accepter.
Tenez les catalogues de thèmes et les exemples secondaires hors d’un chemin protégé de première image.
Privilégiez des exemples sélectionnés ou adaptatifs sur les appareils contraints et liez vers un banc de travail complet.

Choisir le mode worker

Utilisez renderMode: "auto" dans les applications générales et mesurez le mode résolu. Le mode thread principal est utile pour les tests et les petits graphiques statiques, mais les grands jeux de données interactifs devraient normalement s’exécuter dans un worker.

Ajustez la présentation des lignes selon la charge

lod.density est le contrôle principal fidelity/work. Commencez à 0.75. Augmentez-le lorsque le détail local est visiblement insuffisant et que le temps de frame reste confortable. Diminuez-le pour les zones remplies en plusieurs passes, les rapports device-pixel élevés ou les navigateurs où le coût du fill Canvas2D domine.

La fluidité de la représentation dépend de rebaseRatio et quantizationStep, pas seulement de la densité. Des valeurs plus fines réduisent les changements de texture individuels mais rendent les requêtes de hiérarchie plus fréquentes. Ajustez lors de gestes de zoom réels et comparez le temps de frame en état stable, les visites de requêtes, les sommets de présentation et la stabilité visuelle.

Utilisez setStatsCallback temporairement pendant le développement:

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

Désactivez le callback en production lorsque l’application ne consomme pas la télémétrie.

Regroupez les mises à jour

Utilisez les API bulk de typed-array lorsqu’un lot complet existe déjà.
Utilisez batch() pour plusieurs changements impératifs synchrones causés par une seule action UI.
Évitez de construire des tableaux ou de formater des chaînes dans les callbacks par frame.
Debouncez les reconstructions en streaming côté application et ignorez les résultats asynchrones périmés.

Préservez le sens des données

La réduction de performance doit conserver les extrêmes et les gaps réels. Ne pré-moyennez jamais une enveloppe de plage, ne reliez pas des intervalles manquants, et ne sous-échantillonnez pas indépendamment chaque entrée de zone empilée. Pour OHLCV, agréguez open-first, high-maximum, low-minimum, close-last et volume sommés sur les observations réelles.