Le app web progressive consentono agli sviluppatori di creare una nuova classe di applicazioni che offrono esperienze utente affidabili e ad alte prestazioni. Tuttavia, per assicurarsi che un'app web raggiunga gli obiettivi di rendimento desiderati, gli sviluppatori devono avere accesso a dati di misurazione del rendimento ad alta risoluzione. La specifica W3C Performance Timeline definisce un'interfaccia di questo tipo per i browser per fornire accesso programmatico ai dati relativi ai tempi di basso livello. Ciò apre la strada ad alcuni casi d'uso interessanti:
- analisi del rendimento offline e personalizzate
- Strumenti di visualizzazione e analisi delle prestazioni di terze parti
- valutazione del rendimento integrata in IDE e altri strumenti per sviluppatori
L'accesso a questo tipo di dati sui tempi è già disponibile nella maggior parte dei browser principali per i tempi di navigazione, i tempi delle risorse e i tempi utente. L'ultima aggiunta è l'interfaccia performance observer, che è essenzialmente un'interfaccia di streaming per raccogliere in modo asincrono informazioni sui tempi di basso livello, come vengono raccolte dal browser. Questa nuova interfaccia offre una serie di vantaggi fondamentali rispetto ai metodi precedenti per accedere alla cronologia:
- Oggi le app devono eseguire periodicamente il polling e la differenza delle misurazioni memorizzate, il che comporta un costo elevato. Questa interfaccia offre una chiamata di ritorno. In altre parole, non è necessario eseguire il polling. Di conseguenza, le app che utilizzano questa API possono essere più rapide ed efficienti.
- Non è soggetto a limiti di buffer (la maggior parte dei buffer è impostata su 150 elementi per impostazione predefinita) ed evita le condizioni di gara tra diversi consumatori che potrebbero voler modificare il buffer.
- Le notifiche dell'osservatore del rendimento vengono inviate in modo asincrono e il browser può inviarle durante i periodi di inattività per evitare di competere con il lavoro di rendering critico.
A partire da Chrome 52, l'interfaccia dell'osservatore del rendimento è attivata per impostazione predefinita. Vediamo come utilizzarla.
<html>
<head>
<script>
var observer = new PerformanceObserver(list => {
list.getEntries().forEach(entry => {
// Display each reported measurement on console
if (console) {
console.log("Name: " + entry.name +
", Type: " + entry.entryType +
", Start: " + entry.startTime +
", Duration: " + entry.duration + "\n");
}
})
});
observer.observe({entryTypes: ['resource', 'mark', 'measure']});
performance.mark('registered-observer');
function clicked(elem) {
performance.measure('button clicked');
}
</script>
</head>
<body>
<button onclick="clicked(this)">Measure</button>
</body>
</html>
Questa semplice pagina inizia con un tag script che definisce del codice JavaScript:
- Istanziiamo un nuovo oggetto
PerformanceObservere passiamo una funzione di gestore di eventi al costruttore dell'oggetto. Il costruttore inizializza l'oggetto in modo che il nostro gestore venga chiamato ogni volta che un nuovo insieme di dati di misurazione è pronto per essere elaborato (con i dati di misurazione passati come elenco di oggetti). Il gestore è definito qui come funzione anonima che mostra semplicemente i dati di misurazione formattati nella console. In uno scenario reale, questi dati potrebbero essere memorizzati nel cloud per l'analisi successiva o inviati a uno strumento di visualizzazione interattivo. - Registramo i tipi di eventi di temporizzazione che ci interessano tramite il metodo
observe()e chiamiamo il metodomark()per contrassegnare l'istante in cui abbiamo effettuato la registrazione, che considereremo l'inizio dei nostri intervalli di temporizzazione. - Definiamo un gestore dei clic per un pulsante definito nel corpo della pagina. Questo gestore dei clic chiama il metodo
measure()per acquisire i dati relativi al momento in cui è stato fatto clic sul pulsante.
Nel corpo della pagina, definiamo un pulsante, assegniamo il gestore dei clic all'evento onclick e siamo pronti.
Ora, se carichiamo la pagina e apriamo il riquadro di Chrome DevTools per visualizzare la console JavaScript, ogni volta che facciamo clic sul pulsante viene eseguita una misurazione del rendimento. Poiché abbiamo eseguito la registrazione per osservare queste misurazioni, vengono inoltrate al nostro gestore eventi in modo asincrono senza dover eseguire il polling della sequenza temporale, che mostra le misurazioni sulla console man mano che si verificano:
Il valore start rappresenta il timestamp iniziale per gli eventi di tipo
mark (di cui questa app ne ha uno solo). Gli eventi di tipo measure non hanno un'ora di inizio intrinseca; rappresentano misurazioni del tempo effettuate rispetto all'ultimo evento measure.mark Pertanto, i valori di durata visualizzati qui rappresentano il tempo trascorso tra la chiamata a mark(), che funge da punto di partenza dell'intervallo comune, e più chiamate successive a measure().
Come puoi vedere, questa API è abbastanza semplice e offre la possibilità di raccogliere dati sulle prestazioni in tempo reale, filtrati e ad alta risoluzione senza polling, il che dovrebbe aprire la strada a strumenti di misurazione delle prestazioni più efficienti per le app web.