La API de temporización de recursos proporciona una forma de obtener y analizar datos detallados de temporización de red de la carga de recursos de la aplicación . Las aplicaciones pueden usar algunas métricas de tiempo cuantificables, como la cantidad de tiempo para cargar recursos específicos. Estos recursos pueden ser XMLHttpRequest, <SVG>imágenes, scripts, etc.
Esta interfaz proporciona una 高精度时间戳 línea de tiempo de carga de recursos utilizando métricas. Esta línea de tiempo contiene la hora de muchos eventos de red, como la hora de inicio y finalización de la redirección, la hora de inicio de la solicitud de recursos, la hora de inicio y finalización de la consulta DNS, la hora de inicio y finalización de la respuesta, etc. También contiene el tamaño del recurso solicitado y el tipo de iniciador de solicitud .
Este documento muestra cómo utilizar la interfaz de tiempo de recursos. Para obtener información más detallada o ejemplos, consulte la documentación y consulte también los capítulos de cada interfaz .
Hay un ejemplo real en Github , aquí está su código fuente . Las solicitudes de extracción y los informes de errores son bienvenidos .
Las diversas etapas de la carga de recursos
La aplicación puede obtener la marca de tiempo de cada etapa de la carga de recursos, como la redirección, la consulta de DNS y el establecimiento de la conexión TCP. Estas etapas y sus nombres de atributos se enumeran en la Figura 1.
Figura 1. Propiedades de temporización de recursos
Los desarrolladores de aplicaciones pueden utilizar estos valores de atributo para calcular la duración de una determinada etapa para ayudar a diagnosticar problemas de rendimiento.
Calcule el tiempo de cada etapa de carga de recursos.
El siguiente ejemplo muestra el uso de la propiedad de temporización de recursos para calcular el tiempo necesario para las siguientes etapas: redirección ( redirectStart y redirectEnd ), consulta de DNS ( domainLookupStart y domainLookupEnd), protocolo de enlace de TCP ( connectStart y connectEnd), respuesta ( responseStart y responseEnd). Este ejemplo también se calculó desde el inicio y la solicitud de adquisición de recursos (respectivamente fetchStart y requestStart) en respuesta al final ( responseEndtiempo).
function calculate_load_times() {
// Check performance support
if (performance === undefined) {
console.log("= Calculate Load Times: performance NOT supported");
return;
}
// Get a list of "resource" performance entries
var resources = performance.getEntriesByType("resource");
if (resources === undefined || resources.length <= 0) {
console.log("= Calculate Load Times: there are NO `resource` performance records");
return;
}
console.log("= Calculate Load Times");
for (var i=0; i < resources.length; i++) {
console.log("== Resource[" + i + "] - " + resources[i].name);
// Redirect time
var t = resources[i].redirectEnd - resources[i].redirectStart;
console.log("... Redirect time = " + t);
// DNS time
t = resources[i].domainLookupEnd - resources[i].domainLookupStart;
console.log("... DNS lookup time = " + t);
// TCP handshake time
t = resources[i].connectEnd - resources[i].connectStart;
console.log("... TCP time = " + t);
// Secure connection time
t = (resources[i].secureConnectionStart > 0) ? (resources[i].connectEnd - resources[i].secureConnectionStart) : "0";
console.log("... Secure connection time = " + t);
// Response time
t = resources[i].responseEnd - resources[i].responseStart;
console.log("... Response time = " + t);
// Fetch until response end
t = (resources[i].fetchStart > 0) ? (resources[i].responseEnd - resources[i].fetchStart) : "0";
console.log("... Fetch until response end time = " + t);
// Request start until reponse end
t = (resources[i].requestStart > 0) ? (resources[i].responseEnd - resources[i].requestStart) : "0";
console.log("... Request start until response end time = " + t);
// Start until reponse end
t = (resources[i].startTime > 0) ? (resources[i].responseEnd - resources[i].startTime) : "0";
console.log("... Start until response end time = " + t);
}
}