Guía de rendimiento

El renderizado rápido comienza antes de Canvas2D. Mantenga los datos en formato columnar, transfierálos una sola vez, evite la decodificación en el hilo principal y haga que el gráfico represente únicamente el detalle visible en pantalla.

LOD significa nivel de detalle: el renderizador utiliza una representación del tamaño de la pantalla para datos grandes y revela mayor detalle a medida que el usuario hace zoom. Empiece con la selección automática de worker y la política LOD por defecto, luego mida la carga real de trabajo. Use el laboratorio de calibración LOD solo antes de cambiar la densidad, la relación base o la cuantización.

Canal de carga recomendado

1. Mostrar una vista previa pequeña que preserve los extremos cuando la latencia del primer fotograma sea crítica.
2. Inicie la obtención y la decodificación en un worker de datos dedicado.
3. Lea únicamente las columnas y rangos necesarios desde un formato columnar.
4. Validar longitudes alineadas, X ordenada y finita, unidades y huecos declarados.
5. Transferir columnas tipadas al renderizador del gráfico una sola vez.
6. Terminar el worker de datos tras la transferencia para que no conserve otra copia.

Para lecturas HTTP por rangos, asegúrese de que el host estático soporte rangos de bytes y que los cachés intermedios los preserven. Una alternativa correcta de descarga completa puede seguir siendo demasiado costosa para visitantes móviles.

Mantenga el paquete inicial pequeño

• Importe dinámicamente decodificadores de datos pesados y demos opcionales.
• Monte únicamente el gráfico que esté actualmente visible o seleccionado.
• No envíe a la página de inicio datos de muestra de millones de filas solo para demostrar que el motor de renderizado puede aceptarlos.
• Mantenga catálogos de temas y ejemplos secundarios fuera de la ruta protegida del primer fotograma.
• Prefiera ejemplos seleccionados o adaptativos en dispositivos con recursos limitados y enlace a un banco de trabajo completo.

Elija el modo worker

Use renderMode: "auto" en aplicaciones generales y mida el modo resuelto. El modo en el hilo principal es útil para pruebas y gráficos estáticos pequeños, pero conjuntos de datos interactivos grandes normalmente deberían ejecutarse en un worker.

Ajuste la presentación de la línea según la carga de trabajo

La mayoría de las aplicaciones no necesitan valores LOD personalizados.

lod.density es el control primario de fidelidad/carga. Comience en 0.75. Auméntelo cuando el detalle local sea visiblemente insuficiente y el tiempo por fotograma siga siendo cómodo. Disminúyalo para rangos rellenados en varios pases, ratios de píxel de dispositivo altos o navegadores donde el coste de relleno de Canvas2D domine.

La suavidad de la representación depende de rebaseRatio y quantizationStep, no solo de la densidad. Valores más finos reducen cambios individuales de textura pero aumentan la frecuencia de consultas en la jerarquía. Ajuste con gestos reales de zoom y compare el tiempo por fotograma en estado estable, las visitas de consulta, los vértices de presentación y la estabilidad visual.

Use setStatsCallback temporalmente durante el desarrollo:

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

Desactive la callback en producción cuando la aplicación no consuma telemetría.

Agrupar actualizaciones

• Use API de arrays tipados en bloque cuando ya exista un lote completo.
• Use batch() para varios cambios imperativos síncronos provocados por una sola acción de la interfaz de usuario.
• Evite construir arrays o formatear cadenas dentro de callbacks por cuadro.
• Aplique debounce a las reconstrucciones por streaming en el lado de la aplicación e ignore resultados asíncronos obsoletos.

Los constructores LOD de streaming del gráfico completan trabajo basado en instantáneas mientras llegan nuevas muestras y mantienen los niveles completados utilizables hasta que esté listo un reemplazo. No restablezca el streaming ni reemplace el conjunto de datos completo por cada observación; añada mediante las streaming APIs en su lugar. La actualización de líneas por streaming ajusta los límites incrementalmente en vez de reexplorar el búfer completo en cada añadido.

Los adaptadores de framework recopilan estadísticas solo mientras una devolución de llamada o un oyente activo pueda recibirlas. Vue deja de recopilar después de que se consuma un único oyente .once; Angular también deja de hacerlo cuando las suscripciones finalizan o la salida se cierra. Elimine los oyentes de telemetría cuando la aplicación deje de usar sus mediciones.

Conservar el significado de los datos

La reducción de rendimiento debe conservar los extremos y las brechas reales. Nunca promedie previamente un contorno de rango, conecte intervalos faltantes ni reduzca la muestra de cada entrada de área apilada de forma independiente. Para OHLCV, agregue open-first, high-maximum, low-minimum, close-last y volumen sumado sobre las observaciones reales.