Guia de desempenho

A renderização rápida começa antes do Canvas2D. Mantenha os dados em formato colunar, transfira-os uma vez, evite a decodificação no thread principal e permita que o gráfico renderize apenas o detalhe visível no ecrã.

LOD significa nível de detalhe: o renderer usa uma representação do tamanho do ecrã para dados grandes e revela detalhes mais finos à medida que o utilizador aproxima. Comece com a seleção automática de worker e a política LOD por defeito, depois meça a carga real de trabalho. Utilize o laboratório de calibração LOD apenas antes de alterar a densidade, a proporção base ou a quantização.

Pipeline de carregamento recomendado

1. Mostre uma pré-visualização pequena que preserve os extremos quando a latência do primeiro quadro for importante.
2. Inicie a transferência de rede e a descodificação num worker dedicado de dados.
3. Leia apenas as colunas e intervalos necessários de um formato colunar.
4. Validar comprimentos alinhados, X ordenado finito, unidades e lacunas declaradas.
5. Transferir colunas tipadas para o renderer do gráfico apenas uma vez.
6. Terminar o worker de dados após a transferência para que não retenha outra cópia.

Para leituras HTTP por intervalos, garantir que o host estático suporta intervalos de bytes e que o cache intermédio os preserva; uma alternativa correta de descarga completa ainda pode ser demasiado dispendiosa para visitantes móveis.

Mantenha o bundle inicial pequeno

• Importe dinamicamente decodificadores de dados pesados e demonstrações opcionais.
• Monte apenas o gráfico atualmente visível ou selecionado.
• Não envie ficheiros de demonstração com milhões de linhas para uma página de aterragem apenas para provar que o renderer os aceita.
• Mantenha catálogos de temas e exemplos secundários fora de um caminho protegido do primeiro frame.
• Prefira exemplos curados ou adaptativos em dispositivos com recursos limitados e faça ligação para uma bancada de trabalho completa.

Escolha o modo worker

Use renderMode: "auto" em aplicações gerais e meça o modo resolvido. O modo thread principal é útil para testes e gráficos estáticos pequenos, mas conjuntos de dados interativos grandes devem normalmente correr num worker.

Ajuste a apresentação de linhas conforme a carga de trabalho

A maioria das aplicações não precisa de valores LOD personalizados.

lod.density é o controlo primário de fidelidade/trabalho. Comece em 0.75. Aumente-o quando o detalhe local for visivelmente insuficiente e o tempo de frame permanecer confortável. Diminua-o para intervalos preenchidos em múltiplas passagens, razões de píxel do dispositivo elevadas, ou navegadores onde o custo de preenchimento do Canvas2D predomina.

A suavidade da representação depende de rebaseRatio e quantizationStep, não apenas da densidade. Valores mais finos reduzem alterações individuais de textura mas tornam as consultas à hierarquia mais frequentes. Ajuste com gestos reais de zoom e compare o tempo de frame em estado estacionário, visitas de consultas, vértices de apresentação e estabilidade visual.

Use setStatsCallback temporariamente durante o desenvolvimento:

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

Desative a callback em produção quando a aplicação não consumir telemetria.

Agrupar atualizações

• Utilize APIs em massa para typed‑array quando um lote completo já existir.
• Use batch() para várias alterações imperativas síncronas causadas por uma única ação de IU.
• Evite construir arrays ou formatar strings dentro de callbacks por quadro.
• Debounce as reconstruções em streaming do lado da aplicação e ignore resultados assíncronos obsoletos.

Os construtores LOD em streaming do gráfico completam trabalho baseado em instantâneos enquanto novas amostras chegam e mantêm níveis concluídos utilizáveis até que um substituto esteja pronto. Não reinicie o streaming nem substitua o conjunto de dados completo para cada observação; anexe através das APIs de streaming em vez disso. O streaming de linhas atualiza limites incrementalmente em vez de reexaminar todo o buffer a cada append.

Os adaptadores de framework recolhem estatísticas apenas enquanto um callback ou um listener activo pode recebê‑las. O Vue interrompe a recolha depois de um único listener .once ser consumido; o Angular também interrompe quando as subscrições ou a saída são fechadas. Remova os listeners de telemetria quando a aplicação já não usar as suas medições.

Preservar o significado dos dados

A redução de desempenho deve reter os extremos e as lacunas reais. Nunca pré‑média um envelope de intervalo, ligar intervalos em falta ou subamostrar cada entrada de área empilhada independentemente. Para OHLCV, agregue open‑first, high‑maximum, low‑minimum, close‑last e volume somado com base nas observações reais.