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
Gestire i dati con Azure Cosmos DB Data Explorer
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Selettore CSS :has() e i suoi casi d'uso avanzati
Anonimizzare i dati sensibili nei log di Azure Front Door
Fornire parametri ad un Web component HTML
Applicare un filtro per recuperare alcune issue di GitHub
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Ottimizzazione dei block template in Angular 17
Introduzione ai web component HTML