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
Potenziare la ricerca su Cosmos DB con Full Text Search
Configurare lo startup di applicazioni server e client con .NET Aspire
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Combinare Container Queries e Media Queries
Recuperare App Service cancellati su Azure
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Rendere i propri workflow e le GitHub Action utilizzate più sicure
Generare velocemente pagine CRUD in Blazor con QuickGrid
Scrivere selettori CSS più semplici ed efficienti con :is()
Fissare una versione dell'agent nelle pipeline di Azure DevOps
Utilizzare il metodo IntersectBy per eseguire l'intersection di due liste
Testare l'invio dei messaggi con Event Hubs Data Explorer