html5-apis-teaser_ENG

API de HTML5: mida el rendimiento con el usuario y el tiempo de navegación

Las aplicaciones web complejas pueden ralentizar el poder de procesamiento del cliente. Por lo tanto, es importante, especialmente para los dispositivos móviles, hacer algunos ajustes para que todo funcione sin problemas. El rendimiento de carga se puede probar de forma rápida y precisa con la nueva API de tiempo de usuario para JavaScript, ya que los datos de tiempo se basan en la API de tiempo de alta resolución, que mide el tiempo en microsegundos. La API de tiempo de navegación determina el rendimiento de carga de un sitio web con la ayuda de marcas predefinidas. Gracias a los métodos de medición precisos, los desarrolladores pueden averiguar qué parte de la aplicación pierde tiempo y optimizarla.

Mida con precisión con la API de sincronización del usuario

La API de sincronización del usuario mide el rendimiento entre varias marcas predefinidas dentro de una aplicación web. Solo tiene que definir una marca de inicio y final para la medida que se puede establecer en cualquier lugar del guión. El «rendimiento» del objeto JavaScript ofrece varios métodos para hacerlo.

var measuring_start = performance.now();

Con el método «ahora (0)», puede iniciar la medición en cualquier lugar de la aplicación web, por ejemplo, dentro de un script que ejecuta una función computacionalmente intensiva. En contraste con el objeto «Fecha (0)», que proporciona la sincronización del sistema como una marca de tiempo, la API de sincronización del usuario le brinda una precisión de milisegundos con varios lugares decimales. Si, por ejemplo, desea analizar el rendimiento de carga de una imagen, puede establecer la segunda marca dentro de un evento de «carga».

document.getElementsByTagName("img")[0].addEventListener("load", function() {
  var measuring_end = performance.now();
}, false);

El tiempo transcurrido se calcula como la diferencia entre «inicio_medición» y «fin_medición».

Establecer marcas con «marca (0)»

En lugar de establecer marcas con el método «ahora()» y asignarles una variable, puede usar el método «marcar()» y dar a cada marca un nombre específico.

performance.mark("start");
…
performance.mark("end");

El método «medir()» luego calcula la diferencia entre las dos marcas. Este método necesita tres valores; el primer valor define el nombre de la diferencia y el segundo y tercer valor especifican los nombres de las marcas.

performance.measure("difference", "start", "end");

En este ejemplo, se calcula la diferencia entre la marca de «inicio» y «fin». Para leer los datos de medición, utilice el método «getEntriesByType()». Con este método puede determinar los nombres, así como los tiempos medidos, o más bien calculados, para las marcas establecidas con «mark()» y «measure()».

var marks = performance.getEntriesByType("mark");
var measuring differences = performance.getEntriesByType("measure");

En este ejemplo, la lectura de nombres y valores con «getEntriesByType()» se pasa como una matriz a las variables. A continuación, puede extraer toda la información de las medidas.

console.log(mark[0].name + ": " + mark[0].startTime);
console.log(mark[1].name + ": " + mark[1].startTime);
console.log(measuring differences[0].name + ": " + measuring differences[0].duration);

La función «nombre» muestra los nombres de las marcas o la diferencia calculada. El rendimiento entre las marcas establecidas con «mark()» se puede mostrar con «startTime». Las diferencias calculadas con el método «medida()» se pueden mostrar con «duración». En el ejemplo, todo está escrito en la consola del navegador. En lugar de abordar los tipos de marcas y cálculos, «getEntriesByName()» permite abordar sus nombres.

var marks = performance.getEntriesByName("start");
console.log(marks[0].name + ": " + marks[0].startTime);

En este ejemplo, la marca de «inicio», establecida con el método «mark()», se pasa a una variable y se escribe en la consola.

Eliminar marcas y cálculos

Si desea eliminar marcas individuales o cálculos o incluso todos, puede hacerlo con los métodos «clearMarks()» y «clearMeasures()». Es posible pasar los nombres de los valores eliminados a los métodos.

performance.clearMarks("start");

En este ejemplo, eliminamos la marca de «inicio». Si ejecuta ambos métodos sin pasar un nombre, se eliminarán todas las marcas predefinidas.

performance.clearMarks();

Medir el rendimiento de carga de un sitio web con la API de tiempo de navegación

A diferencia de la API de tiempo de usuario, la API de tiempo de navegación renuncia a la medición de tiempo precisa en el área de microsegundos. En cambio, el rendimiento se mide con una marca de tiempo simple. La ventaja es que el rendimiento de carga de un sitio web se puede determinar fácilmente mediante marcas predefinidas. Puede medir el tiempo necesario desde que se «descarga» un documento abierto hasta que se carga un documento. Todas las marcas se introducen con «performance.timing» seguido de una función que especifica el tiempo de medición.

console.log(performance.timing.navigationStart);

En este ejemplo, «navigationStart» determina la hora en que se ejecutó el evento «descargar» en el documento que estaba abierto previamente. La API de temporización de navegación muestra la hora como una marca de tiempo común en milisegundos. En este ejemplo, la marca de tiempo se escribe en la consola.

console.log(performance.timing.domLoading);
console.log(performance.timing.domComplete);

En el segundo ejemplo, el tiempo se mide cuando el navegador comienza a cargar el árbol DOM. Luego determina el momento en que el árbol DOM está completamente cargado. Si prefiere saber la duración de los tiempos de carga, primero deberá determinar la marca de tiempo actual. A continuación, puede restar todos los valores determinados por «performance.timing» de la marca de tiempo.

window.addEventListener("load", function() {
  var now = new Date().getTime();
  console.log(now - performance.timing.domComplete);
}, false);

En este ejemplo, solo se escribe en la consola la diferencia de tiempo hasta que el árbol DOM esté completamente cargado. Hay 21 características diferentes que miden el tiempo hasta cierto punto dentro de un proceso de carga. Además de «tiempo» también existe el objeto de «navegación» que tiene dos características. La función «tipo» proporciona detalles en forma de número sobre cómo se abrió el documento.

console.log(performance.navigation.type);

Si el número es 0, el documento se abrió mediante un enlace o entrada directa. Si el número es dos, el documento se abrió con los botones de navegación del navegador. Si ninguna de las opciones encaja, se devolverá el valor 255. Si el sitio se abrió por redirección, «redirectCount» muestra el número de redirecciones hasta que se cargó el documento actual.

console.log(performance.navigation.redirectCount);

Compatibilidad con navegador

La API de tiempo de usuario funciona en todos los navegadores estándar, incluido Internet Explorer 10+. Las versiones anteriores del navegador se pueden usar con un polyfill que requiere el soporte de la API de tiempo de alta resolución. Necesitará al menos la versión 20 de Chrome, la versión 15 de Firefox o la versión 10 de Internet Explorer. Las versiones anteriores de los navegadores mencionados ya son compatibles con la API de tiempo de navegación. Por lo tanto, se pueden usar con Chrome y Firefox sin problemas. Internet Explorer lo soporta desde la versión 9.

enlaces relacionados

#API #HTML5 #mida #rendimiento #con #usuario #tiempo #navegación

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *