Las marcas y medidas de tiempo de usuario son dos funciones relacionadas con el rendimiento disponibles en la mayoría de los navegadores modernos. Permiten recopilar datos sobre cómo los usuarios utilizan tu página web o aplicación, lo que ayuda a optimizar el rendimiento de tu sitio web.
Las marcas de tiempo de usuario se utilizan para marcar puntos específicos del código, que luego se pueden medir mediante la medición del tiempo de usuario. Esto puede ayudar a identificar cuellos de botella en el código. Por ejemplo, se puede usar una marca de tiempo de usuario para marcar el inicio de un JavaScript y luego usar una medida de tiempo de usuario para ver cuánto tardó en cargarse.
Las medidas de tiempo de usuario miden el tiempo entre dos marcas de tiempo de usuario. Esto puede ayudar a medir el rendimiento de fragmentos de código específicos. Por ejemplo, se podría usar una medida de tiempo de usuario para ver cuánto tardó en completarse una AJAX .
Puede leer más sobre las marcas y medidas de tiempo de usuario en el sitio web del W3C.
¿Qué son las marcas de tiempo de usuario?
Estas dos, marcas y medidas de tiempo de usuario, son métricas de rendimiento que permiten identificar problemas y optimizar aplicaciones web. Las marcas de tiempo de usuario miden el tiempo transcurrido entre dos eventos o el tiempo necesario para completar uno. Las medidas de tiempo de usuario miden la duración de un evento o el número de eventos que ocurren en un período determinado.
¿Cómo agregar marcas de tiempo de usuario?
Añadir marcas y medidas de tiempo de usuario es una excelente manera de obtener información sobre el rendimiento de tus páginas web. El tiempo de usuario te permite rastrear la duración de ciertos eventos en tus páginas, como cuando un usuario hace clic en un botón o enlace.
Para agregar marcas y medidas de tiempo de usuario, primero deberá crear un nuevo archivo JavaScript. A continuación, deberá incluir el siguiente código en el archivo:
var startTime = Fecha.ahora();
función hacerAlgo() {
var endTime = Fecha.ahora();
var tiempo tomado = hora de finalización – hora de inicio;
console.log('La función doSomething tardó ' + timeTaken + 'ms en ejecutarse.');
}
El código anterior te permitirá rastrear el tiempo que tarda la función "do Something" en ejecutarse. También puedes usar esta técnica para rastrear otros eventos en tu página. Para ello, reemplaza el nombre de la función en el código anterior por el nombre del evento que quieres rastrear.
Consejos para marcar el tiempo en tu código
1. Si quieres medir el tiempo que tarda algo en ocurrir en tu código, puedes usar el performance.now() . Esto te dará una marca de tiempo precisa con una precisión de milésimas de milisegundo.
2. También puedes utilizar el método Date.now() si no necesitas una precisión tan alta.
3. Si desea medir cuánto tiempo tarda algo en unidades específicas (por ejemplo, segundos, minutos, etc.), puede utilizar los métodos performance.mark() y performance.measure().
4. Finalmente, si desea obtener información detallada sobre lo que sucede en su código y cuánto tiempo tardó en ejecutarse cada parte, puede utilizar los métodos mark() y measure() de la API User Timing.
Conclusión
La API de Tiempo de Usuario es una excelente manera de comprender cómo interactúan los usuarios con las aplicaciones web. Mediante marcas y medidas, puede rastrear eventos específicos e información de tiempo para detectar posibles cuellos de botella o problemas. Además, la API de Tiempo de Usuario permite recopilar datos de rendimiento que permiten mejorar la experiencia general del usuario.
