Prestatiewaarnemer - Efficiënte toegang tot prestatiegegevens

Progressive Web Apps stellen ontwikkelaars in staat een nieuwe klasse applicaties te bouwen die betrouwbare, hoogwaardige gebruikerservaringen bieden. Maar om er zeker van te zijn dat een webapp de gewenste prestatiedoelen behaalt, hebben ontwikkelaars toegang nodig tot prestatiemeetgegevens met hoge resolutie. De W3C Performance Timeline-specificatie definieert een dergelijke interface voor browsers om programmatische toegang te bieden tot timinggegevens op laag niveau. Dit opent de deur naar enkele interessante gebruiksscenario’s:

  • offline en aangepaste prestatieanalyse
  • prestatieanalyse- en visualisatietools van derden
  • prestatiebeoordeling geïntegreerd in IDE's en andere ontwikkelaarstools

Toegang tot dit soort timinggegevens is al beschikbaar in de meeste grote browsers voor navigatietiming , resourcetiming en gebruikerstiming . De nieuwste toevoeging is de prestatiewaarnemerinterface , die in wezen een streaminginterface is om timinginformatie op laag niveau asynchroon te verzamelen, zoals deze door de browser wordt verzameld. Deze nieuwe interface biedt een aantal cruciale voordelen ten opzichte van eerdere methoden om toegang te krijgen tot de tijdlijn:

  • Tegenwoordig moeten apps periodiek de opgeslagen metingen opvragen en differentiëren, wat kostbaar is. Deze interface biedt hen een terugbelmogelijkheid. (Met andere woorden, het is niet nodig om te stemmen). Als gevolg hiervan kunnen apps die deze API gebruiken responsiever en efficiënter zijn.
  • Het is niet onderworpen aan bufferlimieten (de meeste buffers zijn standaard ingesteld op 150 items) en vermijdt race-omstandigheden tussen verschillende consumenten die de buffer mogelijk willen wijzigen.
  • Notificaties van prestatiewaarnemers worden asynchroon geleverd en de browser kan deze tijdens inactiviteit verzenden om te voorkomen dat er met kritisch weergavewerk wordt geconcurreerd.

Vanaf Chrome 52 is de interface voor prestatiewaarnemers standaard ingeschakeld . Laten we eens kijken hoe we het kunnen gebruiken.

<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>

Deze eenvoudige pagina begint met een scripttag die een aantal JavaScript-code definieert:

  • We instantiëren een nieuw PerformanceObserver object en geven een gebeurtenishandlerfunctie door aan de objectconstructor. De constructor initialiseert het object zodanig dat onze handler wordt aangeroepen telkens wanneer een nieuwe set meetgegevens klaar is om te worden verwerkt (waarbij de meetgegevens worden doorgegeven als een lijst met objecten). De handler wordt hier gedefinieerd als een anonieme functie die eenvoudigweg de opgemaakte meetgegevens op de console weergeeft. In een realistisch scenario kunnen deze gegevens in de cloud worden opgeslagen voor latere analyse, of worden doorgesluisd naar een interactieve visualisatietool.
  • We registreren voor de typen timinggebeurtenissen waarin we geïnteresseerd zijn via de observe() methode en roepen de mark() methode aan om het moment te markeren waarop we ons hebben geregistreerd, wat we zullen beschouwen als het begin van onze timing-intervallen.
  • We definiëren een klikhandler voor een knop die is gedefinieerd in de hoofdtekst van de pagina. Deze klikhandler roept de methode measure() aan om timinggegevens vast te leggen over het moment waarop op de knop werd geklikt.

In de hoofdtekst van de pagina definiëren we een knop, wijzen we onze klikhandler toe aan de onclick gebeurtenis en zijn we klaar om te gaan.

Als we nu de pagina laden en het Chrome DevTools-paneel openen om de JavaScript-console te bekijken, wordt elke keer dat we op de knop klikken een prestatiemeting uitgevoerd. En omdat we ons hebben geregistreerd om dergelijke metingen te observeren, worden ze asynchroon doorgestuurd naar onze gebeurtenishandler, zonder dat we de tijdlijn hoeven te raadplegen , die de metingen op de console weergeeft zodra ze plaatsvinden:

Prestatiewaarnemer.

De start vertegenwoordigt de starttijdstempel voor gebeurtenissen met een mark (waarvan deze app er slechts één heeft). Evenementen met type measure hebben geen inherente starttijd; zij vertegenwoordigen timingmetingen die zijn uitgevoerd ten opzichte van de laatste mark . De duurwaarden die hier worden weergegeven vertegenwoordigen dus de verstreken tijd tussen de aanroep van mark() , die dient als gemeenschappelijk startpunt voor het interval, en meerdere daaropvolgende aanroepen van measure() .

Zoals u kunt zien, is deze API vrij eenvoudig en biedt deze de mogelijkheid om gefilterde, realtime prestatiegegevens met hoge resolutie te verzamelen zonder polling, wat de deur zou moeten openen naar efficiëntere prestatietools voor webapps.