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
Evitare memory leaks nelle closure JavaScript
Utilizzare WhenEach per processare i risultati di una lista di task
.NET Conference Italia 2024
Utilizzare WebJobs su Linux con Azure App Service
Gestione dell'annidamento delle regole dei layer in CSS
Creare una libreria CSS universale: Immagini
Migliorare l'organizzazione delle risorse con Azure Policy
Recuperare gli audit log in Azure DevOps
Utilizzare la funzione EF.Parameter per forzare la parametrizzazione di una costante con Entity Framework
Proteggere le risorse Azure con private link e private endpoints
Creare una libreria CSS universale: i bottoni
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
I più letti di oggi
- Eseguire query con LINQ to SQL
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Gestione file Javascript in Blazor con .NET 9
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- #VS2017 Community è già disponibile al download da questa pagina https://aspit.co/bgb
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!