Desde hace ya bastante tiempo todos los navegadores (incluso Internet Explorer) incluyen herramientas de desarrollo muy completas para trabajar con Javascript, entre las cuales existen profilers que nos permiten identificar cuellos de botella en nuestras aplicaciones web, tanto a nivel de rendimiento como de consumo de memoria.

Estas herramientas están muy bien, pero a veces necesitamos algo que nos proporcione una información más inmediata de lo rápido que se está ejecutando nuestra aplicación o de la memoria que estamos ocupando en cada momento. En este post vamos a ver un par de herramientas muy sencillas que nos pueden venir bien para obtener estos datos.

memory-stats.js

Como su nombre indica, memory-stats.js nos permite mostrar estadísticas del consumo de memoria de una aplicación Javascript.

Para utilizarlo, podemos instalarlo desde bower o incluir directamente en nuestra página el fichero js necesario. Después sólo necesitamos crear un objeto MemoryStats que se encargará de mostrar un pequeño gráfico con las estadísticas de consumo de memoria:

Podemos configurar la posición del gráfico y la frecuencia de actualización. Lo mínimo que necesitaríamos para usarlo (asumiendo que queremos refrescar el gráfico tan rápido como podamos) es:

// Creamos el objeto MemoryStats
var stats = new MemoryStats();

// Colocamos el gráfico en la esquina inferior derecha
stats.domElement.style.position = 'fixed';
stats.domElement.style.right = '0px';
stats.domElement.style.bottom = '0px';

document.body.appendChild( stats.domElement );

// Actualizamos con requestAnimationFrame
requestAnimationFrame(function rAFloop(){
    stats.update();
    requestAnimationFrame(rAFloop);
});

Internamente, memory-stats.js se basa en la API window.performance.memory, que es una extensión propietaria de Chrome y, por tanto, sólo está disponible en ese navegador. Además, para obtener resultados más precisos deberemos ejecutar Chrome con el parámetro --enable-precise-memory-info.

stats.js

stats.js nos permite añadir también un pequeño gráfico que nos indique el número de frames por segundo (o los milisegundos entre frames, lo que más nos guste) a los que está funcionando nuestra aplicación web.

Al igual que memory-stats.js, podemos instalarlo desde bower o referenciar directamente el fichero javascript de stats.js, y al emplearlo mostrará un gráfico con las estadísticas en nuestra página:

El modo de uso es muy similar al de memory-stats.js (que, de hecho, está inspirado en esta librería). Sólo necesitamos crear un objeto Stats, configurar el gráfico para añadirlo al DOM y empezar tomar tiempos:

// Creamos el objeto Stats
var stats = new Stats();
stats.setMode(1); // 0: fps, 1: ms

// Lo colocamos en la esquina superior derecha
stats.domElement.style.position = 'fixed';
stats.domElement.style.right = '0px';
stats.domElement.style.top = '0px';

document.body.appendChild( stats.domElement );

// Monitorizamos algún proceso
var update = function () {
    stats.begin();

    // aquí va el código a monitorizar

    stats.end();
    requestAnimationFrame( update );
};

requestAnimationFrame( update );

La parte más complicada de esto es ver en qué parte de nuestra aplicación colocar los stats.begin/stats.end, ya que no siempre es fácil encontrar un punto bueno para hacer la medición (ni siquiera siempre tiene sentido hacerlo, la verdad).

Los tiempos se miden utilizando Date.now(), por lo que la precisión no va a ser muy elevada. Si necesitas una precisión mayor, seguramente puedas conseguirla modificando la librería para utilizar la API de window.performance.

Resumen

Tanto memory-stats.js como stats-js son dos librerías muy simples que nos pueden ayudar a monitorizar en tiempo real el rendimiento de una aplicación web.

Ninguna de ellas sustituye a los profilers que se incluyen con las herramientas de desarrollo de los navegadores, pero la posibilidad de ver en tiempo real el comportamiento de la aplicación resulta útil en determinadas circunstancias, y no siempre es fácil o cómodo conectar las herramientas de desarrollo, especialmente cuando trabajamos con algunos dispositivos móviles.