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
Filtrare i dati in ASP.NET Core usando OpenTelemetry su Azure Monitor
Blazor e Static Web Assets in .NET 10
Gestione opzioni colonna nella Blazor QuickGrid
Importare repository da Bitbucket a GitHub Enterprise Cloud
Rendere affidabile lo scale out su Azure App Service
Analizzare il contenuto di una issue con GitHub Models e AI
Gestione delle issue type con GitHub
Personalizzare i parametri del CSS Scroll Snap
Integrare Agenti A2A in Azure API Management
Gestire progetti NPM in .NET Aspire
Evidenziare una porzione di testo in un pagina dopo una navigazione
Integrare SQL Server in un progetto .NET Aspire
I più letti di oggi
- Real Code Day 4.0: costruire applicazioni reali - Firenze
- Community Days 2012 Bari - Bari
- Speciale Windows Azure: la piattaforma di Microsoft per il cloud computing
- Presentato il Windows Store: ecco tutte le novità
- Wrox chiude per bancarotta
- Mono 1.0 nel 2004
- Due regali dal Tech-Ed USA 2004: WSE 2.0 e VS 2005 Team System
- .NET Compact Framework beta
- Rilasciata versione 1.1.17 di Mono




