javascript - simple - graficos html
¿Cómo obtener rendimiento de renderizado para bibliotecas de gráficos basados en Javascript? (2)
Mi método es realmente básico. Creo una var con la hora actual y luego llamo a console.log () con el tiempo que llegué al final de mi bloque de código y la diferencia.
var start = +new Date();
//do lots of cool stuff
console.log(''Rendered in '' + (new Date() - start) + '' ms'');
Muy genérico y hace lo que dice en la lata. Si quiere medir cada sección de código, debería hacer nuevos intervalos de tiempo. Sí, el cálculo lleva tiempo. Pero es minúsculo en comparación con lo que está haciendo el código que quiero medir. Ejemplo en acción en jsFiddle .
Para comenzar, soy bastante nuevo en la programación de Javascript, pero he estado trabajando con varias bibliotecas desde hace un tiempo. Se me ha encomendado la tarea de obtener métricas de rendimiento para varias bibliotecas de gráficos para encontrar la más rápida y flexible en función de algunas de las bibliotecas disponibles (por ejemplo, AmCharts, HighCharts, SyncFusion, etc.). He intentado con JSPerf y parece que estoy obteniendo métricas de rendimiento para la ejecución del código y no el gráfico representado real, que es la métrica que queremos (también conocida como la experiencia del usuario). Intenté usar el performance.now () dentro del código JavaScript en el encabezado y también envuelto alrededor de las etiquetas donde se muestran los gráficos, pero ninguno de los dos métodos está funcionando.
¿Cuál es la mejor manera de obtener estas métricas de rendimiento basadas en la representación?
Respuesta corta :
Ya sea :
- Comience su sincronización justo antes de que se ejecute el código del gráfico y configure un MutationObserver para observar el DOM y finalizar el tiempo cuando finaliza toda la mutación.
- Averigüe si la biblioteca de gráficos tiene un evento done (). (Pero tenga cuidado ya que puede ser impreciso dependiendo de la implementación / biblioteca. "Hecho ()" podría significar que se realizó visualmente, pero el trabajo de fondo todavía se está realizando. Esto podría causar que la interactividad se ponga nerviosa hasta que el gráfico esté completamente listo).
Respuesta larga :
Supongo que sus datos de prueba son bastante grandes ya que la mayoría de las bibliotecas pueden manejar un par de miles de puntos sin ninguna degradación insignificante. Medir el rendimiento de las bibliotecas de gráficos del lado del cliente es en realidad un problema bilateral: tiempos de renderización y usabilidad. Los tiempos de representación pueden medirse por la duración cuando una biblioteca interpreta el conjunto de datos, a la representación visual del gráfico. Dependiendo del algoritmo de interpretación de cada biblioteca, su millaje variará dependiendo del tamaño de los datos. Digamos que la biblioteca X usa un algoritmo de muestreo agresivo y solo tiene que dibujar un pequeño porcentaje del conjunto de datos. El rendimiento será extremadamente rápido, pero puede o no ser una representación precisa de su conjunto de datos. Aún más, la interactividad en un detalle de grano más fino podría ser limitada.
Lo que me lleva al aspecto de usabilidad e interactividad del rendimiento. Estamos usando una computadora y no una tabla en una hoja de papel; debe ser lo más interactivo posible. Sin embargo, a medida que aumenta la cantidad de interactividad, su navegador podría ser más lento según la implementación de la biblioteca. ¿Qué pasaría si cada uno de tus millones de puntos de datos fuera un domdom interactivo? 1 millón de puntos de datos seguramente bloquearían el navegador.
La mayoría de las bibliotecas de gráficos tratan el intercambio entre rendimiento, precisión y usabilidad de manera diferente. En cuanto a qué es todo, todo depende de la implementación.
Plug / Source: soy desarrollador en ZingChart y tratamos a nuestros clientes con grandes conjuntos de datos todo el tiempo. También creamos esto que es bastante relevante para sus pruebas: http://www.zingchart.com/demos/zingchart-vs/