Osservatore del rendimento - Accesso efficiente ai dati sul rendimento

Marc Cohen
Twitter Homepage

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 essere sicuri che un'app web raggiunga gli obiettivi di rendimento desiderati, gli sviluppatori devono accedere a dati di misurazione delle prestazioni ad alta risoluzione. La specifica W3C Performance Timeline definisce un'interfaccia in cui i browser forniscono l'accesso programmatico ai dati dei tempi di attività di basso livello. Questo apre le porte ad alcuni casi d'uso interessanti:

  • analisi del rendimento offline e personalizzata
  • strumenti di terze parti per l'analisi del rendimento e la visualizzazione
  • Valutazione delle prestazioni integrata negli IDE e in altri strumenti per sviluppatori

L'accesso a questo tipo di dati dei tempi è già disponibile nella maggior parte dei principali browser per i tempi di navigazione, i tempi delle risorse e i tempi degli utenti. L'ultima novità è l'interfaccia performance osservazione, che è essenzialmente un'interfaccia di streaming per raccogliere in modo asincrono informazioni sulle tempistiche di basso livello, poiché vengono raccolte dal browser. Questa nuova interfaccia offre una serie di vantaggi critici rispetto ai metodi precedenti per accedere alla sequenza temporale:

  • Oggi le app devono eseguire periodicamente il polling e la differenza delle misurazioni archiviate, il che è costoso. Questa interfaccia offre loro un callback. (In altre parole, non è necessario eseguire un sondaggio). Di conseguenza, le app che utilizzano questa API possono essere più reattive ed efficienti.
  • Non è soggetto a limiti di buffer (la maggior parte dei buffer è impostata su 150 elementi per impostazione predefinita) ed evita race condition tra diversi consumatori che potrebbero voler modificare il buffer.
  • Le notifiche dell'osservatore delle prestazioni vengono inviate in modo asincrono e il browser può inviarle durante il tempo di inattività per evitare di competere con il lavoro di rendering critico.

A partire da Chrome 52, l'interfaccia dello strumento di osservazione delle prestazioni è attivata per impostazione predefinita. Vediamo come utilizzarlo.

<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 il codice JavaScript:

  • Creiamo un'istanza di un nuovo oggetto PerformanceObserver e passiamo una funzione gestore di eventi al costruttore di oggetti. Il costruttore inizializza l'oggetto in modo che il nostro gestore venga chiamato ogni volta che un nuovo set di dati di misurazione è pronto per essere elaborato (con i dati di misurazione trasmessi come elenco di oggetti). Il gestore è definito qui come una funzione anonima che mostra semplicemente i dati di misurazione formattati nella console. In uno scenario reale, questi dati potrebbero essere archiviati nel cloud per essere analizzati successivamente o riportati in uno strumento di visualizzazione interattivo.
  • Registriamo i tipi di eventi di temporizzazione che ci interessano tramite il metodo observe() e chiamiamo il metodo mark() per contrassegnare il momento in cui ci siamo registrati, che considereremo all'inizio dei nostri intervalli di tempo.
  • 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 dei tempi relativi al momento in cui è stato fatto clic sul pulsante.

Nel corpo della pagina definiamo un pulsante, assegniamo il nostro gestore dei clic all'evento onclick e siamo pronti per iniziare.

Ora, se carichiamo la pagina e apriamo il riquadro Chrome DevTools per visualizzare la console JavaScript, ogni volta che facciamo clic sul pulsante viene eseguita una misurazione delle prestazioni. E poiché ci siamo registrati per osservare queste misurazioni, vengono inoltrate al nostro gestore di eventi, in modo asincrono senza la necessità di eseguire il polling della sequenza temporale, che mostra le misurazioni sulla console nel momento in cui si verificano:

Osservatore delle prestazioni.

Il valore start rappresenta il timestamp di inizio 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 le misurazioni della tempistica effettuate rispetto all'ultimo evento mark. Pertanto, i valori di durata visualizzati qui rappresentano il tempo trascorso tra la chiamata a mark(), che funge da punto di partenza di un intervallo comune e le varie chiamate successive a measure().

Come puoi vedere, questa API è abbastanza semplice e offre la possibilità di raccogliere dati filtrati, ad alta risoluzione e in tempo reale sulle prestazioni senza polling, il che dovrebbe aprire le porte a strumenti per le prestazioni più efficienti per le app web.