Depurar y optimizar aplicaciones Web: User Timing API

Depurar aplicaciones puede ser una tarea increíblemente dolorosa o puede ser algo realmente divertido si consigues obtener información de tu aplicación y mejoras el rendimiento, optimizas consultas, reduces tiempos y, por lo general, mejoras la experiencia de usuario.

La realidad es que no puedes optimizar una aplicación si no eres capaz de obtener información de ella.

codigo-web

Con la explosión del cloud computing y el desarrollo de servicios y aplicaciones web cada vez más complejas y avanzadas, resulta ciertamente difícil conseguir información detallada de donde consume tu aplicación más tiempo.

Como suele ser habitual en este blog para todo problema que planteamos tenemos también una solución.

User Timing API

Cualquier desarrollador que haya utilizado un sistema cloud computing se habrá fijado en que disponemos de timestamps más grandes. Ya no nos vale con milisegundos, ahora tenemos hasta microsegundos, es decir, la millonésima parte de un segundo.

¿Pero necesito yo tanta precisión? La respuesta es sí. Con el desarrollo de aplicaciones que utilizan millones de personas dos individuos en un mismo segundo podrían estar ejecutando la misma acción y originar resultados inesperados, de ahí que exista tanta precisión.

Pero volvamos a la depuración y optimización de aplicaciones. ¿Te imaginas poder disponer de una precisión millonésima de segundo en el lado cliente a la hora de depurar tu aplicación? Con el User Timing API podemos disponer de High Resolution Time que soportan muchos navegadores ya en el lado cliente y así poder estudiar donde nuestra aplicación consume más tiempo.

var hr_time = window.performance.now();

Con esta gran cantidad de información podremos optimizar nuestro sistema como es debido.

Cómo se utiliza
Ya hemos hablado de teoría veamos ahora unos ejemplos de funcionamiento de User Timing API

Como principal herramienta de control de consumo de tiempo en nuestras aplicaciones cliente utilizaremos mark(). Este método te permite guardar un timestamp allí donde lo utilices. Y lo más útil es que puedes definir esta marca con un nombre.

window.performance.mark(‘marca_inicial’);

Una vez hemos puesto todas nuestras marcas en nuestra aplicación viene la parte divertida, utilizaremos el método measure() para calcular tiempos entre las diferentes marcas que indiquemos.

window.performance.measure(‘marca_inicial’, ‘marca_inicio_proceso’, ‘marca_fin_proceso’, ‘marca_final’);

Ahora que hemos medido los tiempos vamos a recuperarlos y pintarlos.

// Recuperamos una lista con todas las marcas ejecutadas en nuestra aplicación.
var items = window.performance.getEntriesByType(‘mark’);

// Recuperamos una lista con todas las medidas que hemos realizado.
var items = window.performance.getEntriesByType(‘measure’);

// Recuperamos una lista con un elemento que indicamos explícitamente.
var items = window.performance.getEntriesByName(‘marca_inicial_proceso’);

var items = window.performance.getEntriesByType('measure');
for (var i = 0; i < items.length(); ++i) {
  var m = items[i];
  console.log('Medida ' + m.name + ' ha consumido ' + m.duration + 'ms');
}

Por último, una vez hayamos terminado o queramos eliminar ciertas marcas o ciertas medidas podremos utilizar los métodos clearMarks() y clearMeasures().

window.performance.clearMarks(); // Eliminamos todas las marcas.
window.performance.clearMarks(‘marca_inicial’); // Eliminamos solo la marca indicada.

window.performance.clearMeasures(); // Eliminamos todas las mediciones.
window.performance.clearMeasures(‘proceso_carga_datos’); // Eliminamos solo la medición indicada.

Ejemplo real: midiendo XHR request
Veamos cómo medir el tiempo consumido por una petición asíncrona.

var myReq = new XMLHttpRequest();
myReq.open(‘GET’, url, true);
myReq.onload = function(e) {
// Marca de fin.
window.performance.mark(‘xhr_fin’);

// Realizamos la medición entre inicio-fin.
window.performance.measure(‘xhr_measure’, ‘xhr_inicio’, ‘xhr_fin’);

// Ejecutamos cualquier proceso con la respuesta.
cualquier_proceso(e.responseText);
}
// Marca de inicio.
window.performance.mark(‘xhr_inicio’);
myReq.send();

Sin duda este API pasará a formar parte de nuestro kit de herramientas de debug y optimización de aplicaciones web. Estoy seguro que se convertirá en una muy buena herramienta para comenzar a medir tiempos en nuestras aplicaciones cliente y poder así mejorar nuestras aplicaciones optimizándolas, gracias a la gran cantidad de información que podemos obtener con esta herramienta.

………

Links referencia: Link1 | Link2 | Link3