Herramienta para evaluar el rendimiento de código JavaScript

En JavaScript es habitual que exista más de una forma para implementar la misma tarea. Pero no todas son igual de rápidas, eficaces ni igual de fáciles de leer. La mejor opción para seleccionar el método más adecuado es realizar un benchmark en el que se compara el rendimiento de cada una de las opciones con un conjunto de datos. Algo que se ha hecho anteriormente en el blog para comparar el rendimiento de las distintas opciones que hay para iterar en JavaScript o para evaluar cómo puede mejorar el uso de la GPU en ciertos cálculos. Recientemente he descubierto una pequeña aplicación que facilita la creación de pruebas de rendimiento o benchmarks que se pueden guardar y compartir. En esta entrada se verá cómo usar esta herramienta para evaluar el rendimiento de código JavaScript.

Evaluar el rendimiento de código JavaScript en un navegador

En la página jsben.ch se encuentra una pequeña joya que permite realizar un benchmarks de código JavaScript de una manera fácil y rápida. Las cuales se pueden guardar y compartir con compañeros para analizar los resultados.

Como se puede ver en la captura de pantalla, es una herramienta bastante sencilla. A la izquierda se encuentran varios bloques de código en los que se puede escribir los distintos métodos que se desean comparar. Al pulsar sobre el botón RUN TESTS cada bloque se ejecutará por separado y en la sección results se mostrará de forma ordenada el tiempo relativo que requiere cada uno de ellos. Para facilitar el análisis una buena idea es agitar un nombre significativo a cada uno de los bloques, especialmente cuando se van a comparar varios.

Además de esto, a la izquierda se puede incluir un título con la descripción de la comparativa. Algo que es de gran ayuda cuando se desea compartir las pruebas. En la sección llamada Setup block se puede incluir el código que sea necesario ejecutar antes de lanzar la prueba, por ejemplo, para incluir la definición de las funciones que se desea analizar. Este código se ejecutará una vez al iniciar la prueba.

Cualquier operación que sea necesario realizar antes de evaluar cada uno de los bloques de código se debe incluir en la sección boileplate block. Esta es la zona donde se pueden inicializar las variables.

Una vez realizada la prueba se puede comprar con compañeros u otros usuarios creando una URL única. La cual se puede obtener al pulsar sobre el botón GENERATE PAGE URL.

Comparar diferentes métodos de iteración en JavaScript

Gracias a esta página se pueden comparar los diferentes métodos que se tienen para iterar sobre un diccionario en JavaScript. Para ello se puede recurrir a los ejemplos que se publicaron anteriormente en la entrada “Rendimiento al iterar en JavaScript sobre un vector”. Con lo que se puede crear el siguiente benchmark al que se puede acceder en la URL https://jsben.ch/64LtE.

En dónde se puede ver que la mejor opción es el método for seguido muy de cerca por reduce. Nótese que en este caso no se muestra el tiempo, sino que un benchmark de cada uno de los bloques, el valor más alto indica un mejor rendimiento.

Conclusiones

Contar con un método para evaluar el rendimiento de código JavaScript es fundamental para seleccionar la mejor opción. En esta entrada se ha visto una herramienta web con la que se puede comparar el rendimiento de diferentes bloques de código JavaScript.