HTML5, mediante le navigation timing API, offre la possibilità di misurare in maniera nativa e molto accurata le prestazioni di una pagina web.
Il valore aggiunto di questa API, rispetto alle precedenti tecniche di misurazione, risiede nella possibilità di fornire dei valori di performance end-to-end, che comprendono l'intero ciclo di vita della pagina, a partire dall'istante in cui questa viene richiesta al server web.
Questo si traduce nella possibilità di testare client-side la latenza, ponderata su tutte le fasi prevista dalla pipeline, percepita dall'utente durante l'utilizzo di un'applicazione.
L'accesso ai dati di performance avviene tramite l'oggetto performance.timing, nell'esempio seguente sono effettuate alcune misurazioni che forniscono un evidenza accurata ed esaustiva delle prestazioni della pagina.
window.onload = function(){
setTimeout(function(){
var res = document.getElementById('results');
var pt = performance.timing;
res.innerHTML = res.innerHTML + 'Total end-to-end performance (ms): ' + (pt.loadEventEnd - pt.navigationStart) + '</br>';
res.innerHTML = res.innerHTML + 'Connection latency (ms): ' + (pt.connectEnd - pt.domainLookupStart) + '</br>';
res.innerHTML = res.innerHTML + 'Network performace (ms): ' + (pt.responseEnd - pt.requestStart) + '</br>';
res.innerHTML = res.innerHTML + 'Time to first byte (ms): ' + (pt.responseEnd - pt.navigationStart) + '</br>';
res.innerHTML = res.innerHTML + 'Local DOM processing performance (ms): ' + (pt.domComplete - pt.domLoading);
});
};
I valori rilevati possono essere trasmessi al server, mediante xmlHttpRequest, per una successiva elaborazione ai fini di diagnostica.
La specifica completa delle Navigation Timing API, con una rappresentazione temporale della successione degli eventi, è disponibile qui:http://www.w3.org/TR/navigation-timing/
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestione delle scrollbar dinamiche in HTML e CSS
.NET Aspire per applicazioni distribuite
Abilitare automaticamente il force push di un gruppo su Azure DevOps
Ridurre il reflow ottimizzando il CSS
Analizzare il contenuto di una issue con GitHub Models e AI
Creare un agente A2Acon Azure Logic Apps
Implementare il throttle in JavaScript
Effettuare un clone parziale di un repository di GitHub
Fissare una versione dell'agent nelle pipeline di Azure DevOps
Gestione ciclo di vita in .NET Aspire
Ottimizzare le performance usando Span<T> e il metodo Split
Integrazione di Copilot in .NET Aspire
I più letti di oggi
- Effettuare il multi-checkout in linea nelle pipeline di Azure DevOps
- Gli oggetti CallOut di Expression Blend 4.0
- Effetto turnstile su tutte le pagine con il Windows Phone Toolkit
- Sfruttare una CDN con i bundle di ASP.NET
- Alleggerire le applicazioni WPF sfruttando gli oggetti Freezable
- Le DirectInk API nella Universal Windows Platform
- Esaminare documenti XML con namespace utilizzando LINQ to XML


