Referentie voor prestatiefuncties

Kayce Basques

Sofia Emelianova

Deze pagina is een uitgebreide referentie van Chrome DevTools-functies voor het analyseren van prestaties.

Ga naar Runtime-prestaties analyseren voor een tutorial over hoe u de prestaties van een pagina analyseert met Chrome DevTools.

Scherm met live statistieken

Als je het deelvenster Prestaties voor het eerst opent, krijg je het scherm Live statistieken te zien. Hierop staat een direct prestatieoverzicht van de huidige pagina met de 3 Core Web Vitals.

De statistieken worden geüpdatet terwijl u met de pagina communiceert en naar nieuwe pagina's navigeert, waaronder zachte navigaties aan de clientzijde in apps met één pagina, aangegeven met de badge ZACHTE NAV. Dit is een goede manier om prestatieproblemen op te sporen, vooral voor INP en CLS als deze alleen in bepaalde omstandigheden optreden. Als een prestatieprobleem zich steeds opnieuw voordoet, kun je een trace opnemen om meer informatie te krijgen om het onderliggende probleem op te sporen.

Functies van het scherm met live statistieken

Het scherm Live statistieken heeft naast de statistieken de volgende functies:

• Veldstatistieken van CrUX als deze aanstaan in het deelvenster Veldstatistieken.
• Een samenvatting van eventuele opvallende verschillen tussen de lokale en veldstatistieken.
• Het LCP-element, waar je de cursor op kunt plaatsen om het op de pagina te markeren.
• Details van het CLS-cluster en het INP-type
• Meer informatie over de cursor op de statistieken plaatsen (bijvoorbeeld LCP- en INP-subonderdelen en veldhistogrammen)
• De deelvensters Interacties en Indelingsverschuivingen waarin de geschiedenis of interacties en indelingsverschuivingen worden vastgelegd.
• Een deelvenster Veldstatistieken waarin de CrUX-gegevens kunnen worden aangezet, details van de periode van die gegevens, de mogelijkheid om te wisselen tussen oorsprongs- en URL-gegevens (indien beschikbaar) en tussen desktop- en mobiele gegevens.
• Een deelvenster met omgevingsinstellingen met richtlijnen voor welk apparaat, CPU- en netwerkbeperking je moet gebruiken op basis van CrUX-gegevens.

Ga naar de blogpost De prestaties van je lokale en echte Core Web Vitals-gebruikers bijhouden in DevTools voor meer informatie.

Prestaties opnemen

Je kunt de runtime- of laadprestaties opnemen met de knoppen linksboven of rechtsboven in het scherm:

Runtime-prestaties registreren

Neem runtimeprestaties op als je de prestaties van een pagina wilt analyseren terwijl deze wordt uitgevoerd, in plaats van geladen.

1. Ga naar de pagina die je wilt analyseren.
2. Klik in DevTools op het tabblad Prestaties.
3. Klik op Opnemen .
4. Doe iets op de pagina. DevTools registreert alle pagina-activiteit die plaatsvindt als gevolg van je interacties.
5. Klik opnieuw op Opnemen of klik op Stoppen om de opname te stoppen.

Laadprestaties opnemen

Neem de laadprestaties op als je de prestaties van een pagina wilt analyseren terwijl deze wordt geladen, in plaats van wanneer deze wordt uitgevoerd.

1. Ga naar de pagina die je wilt analyseren.
2. Open het deelvenster Prestaties van DevTools.
3. Klik op Opnemen en opnieuw laden . DevTools navigeert eerst naar about:blank om eventuele resterende screenshots en traceringen te wissen. DevTools registreert dan prestatiestatistieken terwijl de pagina opnieuw wordt geladen en stopt de opname automatisch een paar seconden nadat het laden is voltooid.

DevTools zoomt automatisch in op het gedeelte van de opname waar de meeste activiteit heeft plaatsgevonden.

In dit voorbeeld toont het deelvenster Prestaties de activiteit tijdens het laden van een pagina.

Screenshots maken tijdens opnemen

Vink het selectievakje Screenshots aan om tijdens de opname een screenshot van elk frame te maken.

Als je de visuele opnamekwaliteit wilt aanpassen binnen geheugenbudgetten, open je Opname-instellingen en selecteer je een voorinstelling voor framegrootte en aantal frames in het dropdownmenu Screenshotopname.

Ga naar Een screenshot bekijken voor meer informatie over hoe je screenshots gebruikt.

Garbage collection afdwingen tijdens opname

Terwijl je een pagina opneemt, klik je op Afval verzamelen mop om afvalverzameling af te dwingen.

Opname-instellingen tonen

Klik op Opname-instellingen om meer instellingen te tonen voor hoe DevTools prestatie-opnamen vastlegt.

JavaScript-samples uitzetten

De track Main van een opname toont standaard gedetailleerde aanroepstacks van JavaScript-functies die tijdens de opname zijn aangeroepen. Zo zet je deze aanroepstacks uit:

1. Open het menu Opname-instellingen . Ga naar Opname-instellingen tonen.
2. Vink het selectievakje JavaScript-samples uitzetten aan.
3. Maak een opname van de pagina.

De volgende screenshots tonen het verschil tussen JavaScript-samples aan- en uitzetten. De track Main van de opname is veel korter als sampling uitstaat, omdat alle JavaScript-aanroepstacks worden weggelaten.

In dit voorbeeld zie je een opname met uitgezette JS-samples.

Dit voorbeeld toont een opname met aangezette JS-voorbeelden.

Het netwerk beperken tijdens de opname

Zo beperk je het netwerk tijdens de opname:

1. Open het menu Opname-instellingen . Ga naar Opname-instellingen tonen.
2. Stel Netwerk in op het gekozen beperkingsniveau.

In het dropdownmenu kan het deelvenster Prestaties ook een standaard voorinstelling voor beperking aanbevelen of een voorinstelling die de ervaring van uw gebruikersbestand benadert op basis van veldgegevens.

De CPU beperken tijdens de opname

Zo beperk je de CPU tijdens de opname:

1. Open het menu Opname-instellingen . Ga naar Opname-instellingen tonen.
2. Stel CPU in op het gekozen beperkingsniveau.

Tip: Je kunt ook aangepaste voorinstellingen voor CPU-throttling kalibreren op je apparaat om beter overeen te komen met mobiele apparaten van het lage en middensegment. Selecteer hiervoor Kalibreren in Opname-instellingen > CPU.

De beperking is afhankelijk van de mogelijkheden van je computer. Met de optie 2x vertraging werkt je CPU bijvoorbeeld 2 keer langzamer dan normaal. DevTools kan de CPU's van mobiele apparaten niet echt simuleren, omdat de architectuur van mobiele apparaten heel anders is dan die van desktops en laptops.

In het dropdownmenu kan het deelvenster Prestaties ook een standaard voorinstelling voor beperking aanbevelen of een voorinstelling die de ervaring van je gebruikers benadert op basis van veldgegevens.

Statistieken voor css-kiezer aanzetten

Zo bekijk je de statistieken van je CSS-regelkiezer tijdens langdurige gebeurtenissen van het type Stijl opnieuw berekenen:

1. Open het menu Opname-instellingen . Ga naar Opname-instellingen tonen.
2. Vink het selectievakje Statistieken voor css-kiezer aanzetten aan.

Ga voor meer informatie naar De prestaties van css-kiezers analyseren tijdens gebeurtenissen van het type Stijl opnieuw berekenen.

Geavanceerde instrumentatie voor tekenen aanzetten

Zo bekijk je gedetailleerde instrumentatie voor tekenen:

1. Open het menu Opname-instellingen . Ga naar Opname-instellingen tonen.
2. Vink het selectievakje Geavanceerde instrumentatie voor tekenen aanzetten aan.

Ga naar Lagen bekijken en Verfprofiel bekijken voor meer informatie over hoe je de verfinformatie gebruikt.

Aangepaste tracks tonen

Zet aangepaste sporen en aangepaste overzichten van sporen aan in het overzicht van het spoor, dat kan worden aangepast met de DevTools Extensibility API.

De vorige opname wissen

Nadat je een opname hebt gemaakt, druk je op Opname wissen om die opname te wissen uit het deelvenster Prestaties.

Een prestatie-opname analyseren

Nadat je de prestaties tijdens de uitvoering hebt vastgelegd of de laadprestaties hebt vastgelegd, biedt het deelvenster Prestaties veel gegevens om de prestaties van wat er net is gebeurd te analyseren.

Een opname annoteren en delen

Ga naar Annotate and share your performance findings (Annotaties toevoegen aan en delen van uw prestatiebevindingen).

Krijg actiegerichte inzichten

Het deelvenster Prestaties bevat prestatie-inzichten die ook in Lighthouse-rapporten worden getoond. Deze inzichten kunnen manieren voorstellen om de prestaties te verbeteren en begeleide analyses bieden voor de volgende prestatieproblemen, zoals LCP- en INP-subonderdelen, problemen met de ontdekking van LCP-verzoeken, derden en verouderde en gedupliceerde JavaScript-bronnen. Ga naar de documentatie over prestatie-inzichten voor een volledige lijst.

De inzichten worden doorgegeven als er geen problemen zijn gevonden. Op het tabblad Inzichten staan ze onderaan in het samengevouwen gedeelte Doorgegeven inzichten. De inzichten die niet zijn geslaagd, staan in hun eigen speciale gedeelten.

Zo gebruik je inzichten:

1. Maak een prestatieopname.
2. Open in de zijbalk links van het deelvenster Prestaties het tabblad Inzichten, vouw verschillende gedeelten uit en plaats de cursor op items en klik erop. In het deelvenster Prestaties worden de bijbehorende gebeurtenissen in de trace gemarkeerd.

Opmerking: Als veldgegevens aanstaan in live statistieken, zie je deze gegevens in het gedeelte met statistieken van het tabblad Inzichten en in tooltips in de prestatietrace.

Navigeren in de opname

Als je de cursor op een prestatietracering plaatst, doet het deelvenster Prestaties het volgende:

• Toont een verticale markering die de hele prestatietrace beslaat als je de cursor op het Tijdlijnoverzicht plaatst.
• Markeert een bereik in het Tijdlijnoverzicht als je de cursor op items in de Hoofd-track plaatst.

Als je je prestatieopname nauwkeurig wilt inspecteren, kun je een deel van een opname selecteren, door een lang vlamdiagram scrollen, in- en uitzoomen en breadcrumbs gebruiken om tussen zoomniveaus te springen.

Sneltoetsen gebruiken om te navigeren

Als je sneltoetsen wilt gebruiken om snel door de opname te navigeren, kies je eerst de gewenste stijl voor toetsenbordnavigatie.

Klik rechtsboven in het deelvenster op Help Sneltoetsen tonen en selecteer een van de volgende opties:

• Klassiek: Zoom met het muiswiel (touchpad omhoog of omlaag) en scroll verticaal met Shift + muiswiel.
• Modern: Verticaal scrollen met het muiswiel, horizontaal scrollen met Shift + muiswiel en zoomen met Command/Control + muiswiel.

In het dialoogvenster met sneltoetsen vind je ook een overzicht van de beschikbare sneltoetsen.

Opmerking: Je kunt ook naar links en rechts pannen met A en D en zoomen met W en S.

Een deel van de opname selecteren

Onder de actiebalk van het deelvenster Prestaties en bovenaan de opname staat het gedeelte Tijdlijnoverzicht met de diagrammen CPU en NET.

Als je een deel van een opname wilt selecteren, houd je de muisknop ingedrukt en sleep je naar links of rechts over het Tijdlijnoverzicht.

Zo selecteer je een gedeelte met het toetsenbord:

1. Focus op het hoofdspoor of een van de buren.
2. Gebruik de toetsen W, A, S en D om respectievelijk in te zoomen, naar links te gaan, uit te zoomen en naar rechts te gaan.

Zo selecteer je een gedeelte met een trackpad:

1. Plaats de cursor op het gedeelte Tijdlijnoverzicht of een van de tracks (Hoofd en de aangrenzende tracks).
2. Swipe met 2 vingers omhoog om uit te zoomen, swipe naar links om naar links te gaan, swipe omlaag om in te zoomen en swipe naar rechts om naar rechts te gaan.

Maak broodkruimels en spring tussen zoomniveaus

Met het Tijdlijnoverzicht kun je meerdere geneste broodkruimels achter elkaar maken, de zoomniveaus verhogen en daarna vrij tussen zoomniveaus schakelen.

Zo maak en gebruik je breadcrumbs:

1. Selecteer een deel van de opname in Tijdlijnoverzicht.
2. Plaats de cursor op de selectie en klik op de knop N ms zoom_in. De selectie wordt uitgevouwen om het Tijdlijnoverzicht te vullen. Bovenaan het Tijdlijnoverzicht wordt een reeks breadcrumbs gemaakt.
3. Herhaal de vorige 2 stappen om nog een genest broodkruimelspoor te maken. Je kunt broodkruimels blijven nesten zolang het selectiebereik groter is dan 5 milliseconden.
4. Als je naar een gekozen zoomniveau wilt gaan, klik je op het bijbehorende broodkruimelspoor in de keten bovenaan het Tijdlijnoverzicht.

Als je de onderliggende items van een broodkruimel wilt verwijderen, klik je met de rechtermuisknop op de bovenliggende broodkruimel en selecteer je Onderliggende broodkruimels verwijderen.

Door een lange flame chart scrollen

Als je door een lange flame chart in de hoofdtrack of een van de aangrenzende tracks wilt scrollen, houd je de muisknop ingedrukt en sleep je in een richting totdat je vindt wat je zoekt.

Irrelevante scripts negeren in de flame chart

Als je je beter op je code wilt richten, kun je irrelevante scripts toevoegen aan de negeerlijst.

Doe een van de volgende dingen om scripts te negeren:

• Klik op compress Dialoogvenster voor het instellen van de negeerlijst tonen in de actiebalk bovenaan en typ een reguliere expressie in het invoerveld. Het vlamdiagram past de nieuwe regel toe terwijl u typt.
• Klik met de rechtermuisknop op een script en selecteer Script toevoegen aan negeerlijst. Het deelvenster Prestaties voegt dit script toe aan de lijst in het gecomprimeerde dialoogvenster Instellingen voor negeerlijst tonen.

Het deelvenster vouwt overmatig geneste scripts automatisch samen en markeert ze als On ignore list (REGULAR_EXPRESSION).

In het samengevouwen dialoogvenster Instellingen voor negeerlijst tonen kun je de regels voor de negeerlijst aan- en uitzetten.

Als je een script uit de lijst met negeren wilt verwijderen, klik je er met de rechtermuisknop op in het vlamdiagram en selecteer je Script verwijderen uit de lijst met negeren. Je kunt ook de muisaanwijzer op het script plaatsen in het dialoogvenster Comprimeren Dialoogvenster met instellingen voor de lijst met negeren tonen en op Verwijderen Verwijderen klikken.

DevTools slaat de regels voor de negeerlijst die je toevoegt op in Instellingen Instellingen > Negeerlijst.

Als u zich alleen op first-party scripts wilt richten, vinkt u ook check_box Dim 3rd parties (Derden dimmen) aan. In het deelvenster Prestaties worden scripts van derden grijs weergegeven.

Zoek activiteiten

Je kunt zoeken in de activiteiten in de hoofdtrack en verzoeken in de netwerktrack.

Druk op het volgende om een zoekvak onderaan het deelvenster Prestaties te openen:

• macOS: Command+F
• Windows, Linux: Ctrl+F

In dit voorbeeld staat een reguliere expressie in het zoekvak onderaan die elke activiteit vindt die begint met E.

Zo wissel je tussen activiteiten die overeenkomen met je zoekopdracht:

• Klik op de knoppen expand_less Vorige of expand_more Volgende.
• Druk op Shift+Enter om de vorige te selecteren of op Enter om de volgende te selecteren.

In het deelvenster Prestaties wordt een tooltip getoond over de activiteit die in het zoekvak is geselecteerd.

Zo wijzig je de query-instellingen:

• Klik op match_case Identieke hoofdletters/kleine letters om de query hoofdlettergevoelig te maken.
• Klik op regular_expression Reguliere expressie om een reguliere expressie in je query te gebruiken.

Klik op Annuleren om het zoekvak te verbergen.

De volgorde van tracks wijzigen en ze verbergen

Als je de prestatietrace wilt opschonen, kun je de volgorde van de tracks wijzigen en de irrelevante tracks verbergen in de modus voor trackconfiguratie.

Zo verplaats en verberg je tracks:

1. Als je de instelmodus wilt openen, klik je met de rechtermuisknop op een tracknaam en selecteer je Tracks instellen.
2. Klik op arrow_upward omhoog of arrow_downward omlaag om een track omhoog of omlaag te verplaatsen. Klik op visibility_off om het te verbergen.
3. Klik als je klaar bent onderaan op Instellen van tracks afronden om de instelmodus te sluiten.

Bekijk de video om deze workflow in actie te zien.

Het deelvenster Prestaties slaat de trackconfiguratie op voor nieuwe traceringen, maar niet in de volgende DevTools-sessies.

Activiteit van primaire thread bekijken

Gebruik de track Main om de activiteit te bekijken die heeft plaatsgevonden in de hoofdthread van de pagina.

Klik op een gebeurtenis om meer informatie te bekijken op het tabblad Overzicht, waaronder maar niet beperkt tot: duur (en zelfduur), link naar de bijbehorende regel in het bronscript, oorsprong-URL (met een entiteitsnaam, indien bekend), stacktrace (indien van toepassing) en een uitsplitsing van de timing in een cirkeldiagram.

In het deelvenster Prestaties wordt de geselecteerde gebeurtenis blauw omlijnd.

In dit voorbeeld vind je meer informatie over de gebeurtenis voor de functieaanroep get op het tabblad Overzicht.

Onderscheid maken tussen first-party en externe gebeurtenissen

Overmatig gebruik van code van derden kan een negatieve invloed hebben op de laadprestaties. In het deelvenster Prestaties kun je visueel onderscheid maken tussen first-party en third-party gebeurtenissen in de trace. Zo kun je een beter onderbouwde beslissing nemen over het verminderen of uitstellen van het laden van code van derden om prioriteit te geven aan de content van je pagina.

Zo richt je je alleen op de prestaties van first-party code:

1. Zorg dat er niets is geselecteerd in de prestatietrace of op het tabblad Inzichten. Klik hiervoor op een lege ruimte in de trace.
2. Vink check_box Derden dimmen aan in de actiebalk bovenaan. In het deelvenster Prestaties worden gebeurtenissen die aan derden zijn gerelateerd, grijs gemaakt in het prestatiepad. Alleen de first-party gebeurtenissen blijven gemarkeerd.

Gebeurtenissen markeren met de tabel 1e / 3e partij

Binnen een geselecteerd bereik in het Tijdlijnoverzicht en als geen van de gebeurtenissen is geselecteerd, toont het tabblad Overzicht een tabel 1e / 3e partij met de respectieve overdrachtsgrootten en hoofddraadtijden van het volgende:

• First-party entiteit gemarkeerd met een 1st party-badge.
• Alle gedetecteerde entiteiten van derden in het geselecteerde bereik, niet gemarkeerd.
• Extensies gemarkeerd met Extension-badges.
• Andere [unattributed] entiteiten.

Als u gerelateerde gebeurtenissen wilt markeren in het spoor en de rest grijs wilt maken, plaatst u de cursor op de entiteiten in de tabel. Als u de gebeurtenissen van een entiteit gemarkeerd wilt laten, selecteert u deze in de tabel. Als je de markering wilt verwijderen, klik je op een lege ruimte in de trace.

Als je activiteiten wilt openen die zijn gegroepeerd op deze entiteit op het tabblad Bottom-up, plaats je de cursor op de entiteit in de tabel en klik je op account_tree Bottom-up ernaast.

Het vlamdiagram lezen

Het deelvenster Prestaties toont de activiteit van de hoofdthread in een flame chart. De x-as staat voor de opname in de loop van de tijd. De y-as vertegenwoordigt de aanroepstack. De gebeurtenissen bovenaan veroorzaken de gebeurtenissen eronder.

Dit voorbeeld toont een vlamdiagram in het hoofdspoor. Een click-gebeurtenis heeft een anonieme functieaanroep veroorzaakt. Deze functie riep op zijn beurt onEndpointClick_ aan, die handleClick_ aanriep, enzovoort.

Het deelvenster Prestaties wijst scripts willekeurige kleuren toe om de flame chart op te splitsen en beter leesbaar te maken. In het eerdere voorbeeld zijn functieaanroepen vanuit één script lichtblauw gekleurd. Aanroepen vanuit een ander script zijn lichtroze gekleurd. Het donkergeel staat voor scriptactiviteit en de paarse gebeurtenis staat voor weergaveactiviteit. Deze donkergele en paarse gebeurtenissen zijn consistent in alle opnamen.

Lange taken worden ook gemarkeerd met een rode driehoek en het gedeelte van meer dan 50 milliseconden is rood gearceerd:

In dit voorbeeld duurde de taak meer dan 400 milliseconden. Het gedeelte dat de laatste 350 milliseconden vertegenwoordigt, is daarom rood gearceerd, terwijl de eerste 50 milliseconden niet zijn gearceerd.

Daarnaast toont de Main-track informatie over CPU-profielen die zijn gestart en gestopt met de consolefuncties profile() en profileEnd(). Als je console.profileEnd() aanroept in je code of in de Console, wordt het deelvenster Prestaties automatisch geopend en wordt de opgenomen trace getoond.

Als je het gedetailleerde flame-diagram van JavaScript-aanroepen wilt verbergen, ga je naar JavaScript-voorbeelden uitzetten. Als JS-voorbeelden uitstaan, ziet u alleen de gebeurtenissen op hoog niveau, zoals Event (click) en Function Call.

Gebeurtenisstarters bijhouden

De hoofdtrack kan pijlen tonen die de volgende initiators en de gebeurtenissen die ze hebben veroorzaakt, verbinden:

• Ongeldig maken van stijl of indeling -> Stijlen opnieuw berekenen of Indeling
• Animatieframe vragen -> Animatieframe geactiveerd
• Inactieve callback vragen -> Inactieve callback activeren
• Installatietimer -> Timer geactiveerd
• WebSocket maken -> WebSocket-handshake sturen en ontvangen of WebSocket beëindigen
• postTask plannen -> postTask starten of postTask afbreken

Als je de pijlen wilt zien, zoek je een initiator of de gebeurtenis die deze heeft veroorzaakt in de flame chart en selecteer je deze.

Als dit is geselecteerd, toont het tabblad Overzicht de links Initiator voor voor initiators en de links Gestart door voor de gebeurtenissen die ze hebben veroorzaakt. Klik erop om tussen de bijbehorende gebeurtenissen te springen.

Functies en hun onderliggende items verbergen in het vlamdiagram

Als je de flame chart in de hoofdthread wilt opschonen, kun je geselecteerde functies of de onderliggende functies verbergen:

1. Klik in de hoofdtrack met de rechtermuisknop op een functie en kies een van de volgende opties of druk op de bijbehorende sneltoets:

   • Functie verbergen (H)
   • Onderliggende items verbergen (C)
   • Terugkerende onderliggende items verbergen (R)
   • Onderliggende items resetten (U)
   • Spoor resetten (T)
   • Script toevoegen aan negeerlijst (I)

   

   Naast de functienaam met verborgen onderliggende elementen verschijnt de dropdownknop arrow_drop_down.

2. Als je het aantal verborgen onderliggende items wilt zien, plaats je de cursor op de dropdownknop arrow_drop_down.

   

3. Als je een functie met verborgen onderliggende elementen of de hele flame chart wilt resetten, selecteer je de functie en druk je op U of klik je met de rechtermuisknop op een functie en selecteer je Trace resetten.

Scripts in het flame chart negeren

Als je een script aan de negeerlijst wilt toevoegen, klik je met de rechtermuisknop op een script in het diagram en selecteer je Script toevoegen aan negeerlijst.

Het diagram vouwt genegeerde scripts samen, markeert ze als Op negeerlijst en voegt ze toe aan de regels voor Aangepaste uitsluiting in Instellingen Instellingen > Negeerlijst. Genegeerde scripts worden opgeslagen totdat je ze verwijdert uit de trace of uit de Aangepaste uitsluitingsregels.

Activiteiten in een tabel bekijken

Nadat je een pagina hebt opgenomen, hoef je niet alleen op het hoofdspoor te vertrouwen om activiteiten te analyseren. DevTools biedt ook 3 tabelweergaven om activiteiten te analyseren. Elke weergave biedt een ander perspectief op de activiteiten:

• Als je de hoofdactiviteiten wilt bekijken die het meeste werk veroorzaken, gebruik je het tabblad Aanroeptree.
• Als je de activiteiten wilt bekijken waaraan de meeste tijd is besteed, gebruik je het tabblad Van onderen naar boven.
• Als je de activiteiten wilt bekijken in de volgorde waarin ze tijdens de opname hebben plaatsgevonden, gebruik je het tabblad Gebeurtenislogboek.

Klik op een item in een van de 3 tabellen (en in de tabel 1st / 3rd party op het tabblad Overzicht) om de bijbehorende gebeurtenissen gemarkeerd te houden in de trace en de rest te dimmen terwijl je door de prestatietrace browst.

Op alle 3 tabbladen staan knoppen voor geavanceerd filteren naast de balk Filteren, zodat u sneller vindt wat u zoekt:

• match_case Hoofdlettergevoelig.
• regular_expression Reguliere expressie.
• match_word Moet overeenkomen met heel woord.

Elke tabelweergave in het deelvenster Prestaties toont links voor activiteiten zoals functieaanroepen. DevTools vindt de bijbehorende functiedeclaraties in bronbestanden om je te helpen bij het debuggen. Als de juiste bronkaarten aanwezig zijn en aanstaan, vindt DevTools automatisch de oorspronkelijke bestanden.

Klik op een link om een bronbestand te openen in het deelvenster Bronnen.

Opmerking: De volgende 3 gedeelten verwijzen allemaal naar dezelfde demo. Je kunt de demo zelf uitvoeren op Activity Tabs Demo en de bron bekijken op GoogleChrome/devtools-samples/perf/activitytabs.html.

Rootactiviteiten

Hier volgt een uitleg van het concept hoofdactiviteiten dat wordt genoemd in de gedeelten Aanroepstructuur, Van onder naar boven en Gebeurtenislogboek.

Hoofdactiviteiten zijn activiteiten die ervoor zorgen dat de browser werk uitvoert. Als je bijvoorbeeld op een pagina klikt, activeert de browser een Event-activiteit als hoofdactiviteit. Die Event kan dan een handler laten uitvoeren.

In de flame chart van de hoofdtrack staan de hoofdactiviteiten bovenaan het diagram. Op de tabbladen Aanroeptree en Gebeurtenislogboek zijn rootactiviteiten de items op het hoogste niveau.

Ga naar Het tabblad Aanroepstructuur voor een voorbeeld van hoofdactiviteiten.

Het tabblad Aanroepstructuur

Gebruik het tabblad Aanroeptree om te zien welke hoofdactiviteiten het meeste werk veroorzaken.

Op het tabblad Gespreksstructuur worden alleen activiteiten getoond tijdens het geselecteerde gedeelte van de opname. Ga naar Een deel van een opname selecteren voor meer informatie over hoe je delen selecteert.

In dit voorbeeld zijn de items op het hoogste niveau in de kolom Activiteit, zoals Event, Paint en Composite Layers, hoofdactiviteiten. De nesting vertegenwoordigt de aanroepstack. In dit voorbeeld heeft de Event de Function Call veroorzaakt, die de button.addEventListener heeft veroorzaakt, die de b heeft veroorzaakt, enzovoort.

Eigen tijd staat voor de tijd die rechtstreeks aan die activiteit is besteed. Totale tijd is de tijd die is besteed aan die activiteit of een van de onderliggende activiteiten.

Klik op Eigen tijd, Totale tijd of Activiteit om de tabel op die kolom te sorteren.

Gebruik het vak Filteren om gebeurtenissen te filteren op activiteitsnaam.

Het menu Groepering is standaard ingesteld op Geen groepering. Gebruik het menu Groeperen om de activiteitentabel te sorteren op basis van verschillende criteria.

Het tabblad Bottom-up

Gebruik het tabblad Bottom-up om te bekijken welke activiteiten rechtstreeks de meeste tijd in beslag namen.

Op het tabblad Van onderaf worden alleen activiteiten getoond tijdens het geselecteerde gedeelte van de opname. Ga naar Een deel van een opname selecteren voor meer informatie over hoe je delen selecteert.

In het vlamdiagram van het hoofdspoor van dit voorbeeld zie je dat bijna alle tijd is besteed aan de uitvoering van de 3 aanroepen naar wait(). De belangrijkste activiteit op het tabblad Bottom-up is daarom wait. In de flame chart is het geel onder de aanroepen naar wait eigenlijk duizenden Minor GC-aanroepen. Je kunt op het tabblad Bottom-up zien dat de op een na duurste activiteit Minor GC is.

De kolom Eigen tijd geeft de verzamelde tijd aan die rechtstreeks aan die activiteit is besteed, voor alle instanties.

De kolom Totale tijd geeft de totale tijd aan die is besteed aan die activiteit of een van de onderliggende activiteiten.

Tabel met zwaarste stack

Klik aan de rechterkant van de tabbladen Gespreksstructuur of Van onder naar boven op right_panel_open Zwaarste stack tonen om de tabel Zwaarste stack te tonen.

Deze tabel toont welke kinderen van de geselecteerde activiteit de meeste tijd nodig hadden om deze uit te voeren. Plaats de cursor op een item in de tabel om de bijbehorende gebeurtenis te markeren in het hoofdnummer en de rest te dimmen.

Zo kun je in de prestatiesporen visueel de geneste activiteiten uit de aanroepstack vinden die de meeste tijd in beslag nemen.

Het tabblad Gebeurtenislogboek

Gebruik het tabblad Gebeurtenislogboek om activiteiten te bekijken in de volgorde waarin ze tijdens de opname hebben plaatsgevonden.

Op het tabblad Gebeurtenislogboek staan alleen activiteiten tijdens het geselecteerde gedeelte van de opname. Ga naar Een deel van een opname selecteren voor meer informatie over hoe je delen selecteert.

De kolom Begintijd geeft het punt aan waarop die activiteit is gestart, ten opzichte van het begin van de opname. De begintijd van 1573.0 ms voor het geselecteerde item in dit voorbeeld betekent dat de activiteit 1573 ms nadat de opname is gestart, is begonnen.

De kolom Eigen tijd geeft de tijd aan die rechtstreeks aan die activiteit is besteed.

De kolommen Totale tijd geven de tijd aan die rechtstreeks aan die activiteit of aan een van de onderliggende activiteiten is besteed.

Klik op Begintijd, Zelftijd of Totale tijd om de tabel op die kolom te sorteren.

Gebruik het vak Filteren om activiteiten op naam te filteren.

Gebruik het menu Duur om activiteiten weg te filteren die minder dan 1 ms of 15 ms hebben geduurd. Het menu Duur is standaard ingesteld op Alles, wat betekent dat alle activiteiten worden getoond.

Vink de selectievakjes Laden, Scripting, Renderen of Tekenen uit om alle activiteiten uit die categorieën weg te filteren.

Prestatiemarkeringen bekijken

In een overlay met verticale lijnen in het prestatie-trace kunt u belangrijke prestatiemarkeringen zien, zoals:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• DOMContentLoaded-gebeurtenis (DCL)
• Onload-gebeurtenis (L)

Plaats de cursor op de markernamen onderaan het spoor om het tijdstempel te bekijken.

Aangepaste tijdstippen bekijken

Bekijk op de track Timings je aangepaste prestatiemarkeringen, zoals:

• performance.mark() gesprekken. Hieronder staat een afzonderlijke markering met tooltip op 813,44 ms, gelabeld als JavaScript wordt uitgevoerd.
• performance.measure() gesprekken. Hieronder staat een geel bereik met het label Trage interactie.

Selecteer een markering om meer informatie te bekijken op het tabblad Overzicht, waaronder het tijdstempel, de totale tijd, de eigen tijd en het detail-object. Voor performance.mark()- en performance.measure()-gesprekken toont het tabblad ook stacktraces.

Interacties bekijken

Bekijk gebruikersinteracties in het spoor Interacties om mogelijke problemen met de responsiviteit op te sporen.

Zo bekijkt u interacties:

1. Open DevTools, bijvoorbeeld op deze demopagina.
2. Open het deelvenster Prestaties en start een opname.
3. Klik op een element (koffie) en stop de opname.
4. Zoek de track Interacties op de tijdlijn.

In dit voorbeeld toont het spoor Interacties de interactie Aanwijzer. Interacties hebben snorharen die invoer- en presentatievertragingen aangeven op de grenzen van de verwerkingstijd. Plaats de cursor op de interactie om een tooltip met de invoervertraging, verwerkingstijd en presentatievertraging te tonen.

Het Interacties-spoor toont ook Interaction to Next Paint (INP)-waarschuwingen voor interacties die langer dan 200 milliseconden duren op het tabblad Overzicht en in een tooltip als u de cursor op het spoor plaatst:

De track Interacties markeert de interacties van meer dan 200 milliseconden met een rode driehoek in de rechterbovenhoek.

Verschuivingen in de vormgeving bekijken

Bekijk de verschuivingen in de indeling op de track Verschuivingen in de indeling. Diensten worden getoond als paarse ruiten en worden gegroepeerd in clusters (paarse lijnen) op basis van hun nabijheid op de tijdlijn.

Plaats de cursor op de bijbehorende ruit om een element te markeren dat een indelingsverschuiving in het kijkvenster heeft veroorzaakt.

Klik op de bijbehorende ruit of het bijbehorende cluster voor meer informatie over een of meer indelingsverschuivingen op het tabblad Overzicht met tijden, scores, elementen en mogelijke boosdoeners.

Ga naar Cumulative Layout Shift (CLS) voor meer informatie.

Animaties bekijken

Bekijk animaties op de track Animaties. Animaties worden benoemd als overeenkomstige CSS-property's of -elementen, bijvoorbeeld transform of my-element. Niet-samengestelde animaties zijn gemarkeerd met rode driehoeken in de rechterbovenhoek.

Selecteer een animatie om meer informatie te bekijken op het tabblad Overzicht, waaronder redenen voor mislukte samenstellingen.

GPU-activiteit bekijken

Bekijk GPU-activiteit in het gedeelte GPU.

Rasteractiviteit bekijken

Bekijk rasteractiviteit in het gedeelte Thread Pool.

Frames per seconde (fps) analyseren

DevTools biedt verschillende manieren om frames per seconde te analyseren:

• Gebruik het gedeelte Frames om na te gaan hoelang een bepaald frame duurde.
• Gebruik de FPS-meter voor een realtime schatting van de FPS terwijl de pagina wordt uitgevoerd. Ga naar Frames per seconde in realtime bekijken met de fps-meter.

Het gedeelte Frames

In het gedeelte Frames staat precies hoelang een bepaald frame heeft geduurd.

Plaats de cursor op een frame om een tooltip met meer informatie te tonen.

In dit voorbeeld wordt een tooltip getoond als je de cursor op een frame plaatst.

In het gedeelte Frames kunnen 4 typen frames worden getoond:

1. Inactief frame (wit). Geen wijzigingen.
2. Frame (groen). Op tijd en zoals verwacht gerenderd.
3. Gedeeltelijk gepresenteerd frame (geel met een patroon van brede streepjes). Chrome heeft zijn best gedaan om minstens enkele visuele updates op tijd te renderen. Bijvoorbeeld als het werk van de hoofdthread van het weergaveproces (canvasanimatie) te laat is, maar de compositor-thread (scrollen) op tijd is.
4. Verloren frame (rood met een dicht patroon van ononderbroken lijnen). Chrome kan het frame niet binnen een redelijke tijd renderen.

In dit voorbeeld wordt een tooltip getoond als je de cursor op een gedeeltelijk gepresenteerd frame plaatst.

Klik op een frame om nog meer informatie over het frame te bekijken op het tabblad Overzicht. DevTools omlijnt het geselecteerde frame in het blauw.

Netwerkverzoeken bekijken

Vouw het gedeelte Netwerk uit om een waterfall van netwerkverzoeken te bekijken die tijdens de prestatieopname hebben plaatsgevonden.

Naast de tracknaam Netwerk staat een legenda met kleurgecodeerde verzoektypen.

Verzoeken die het renderen blokkeren, zijn gemarkeerd met een rode driehoek rechtsboven.

Plaats de cursor op een verzoek om een tooltip te bekijken met:

• De URL van het verzoek en de totale tijd die nodig was om het uit te voeren.
• Prioriteit of een wijziging van prioriteit, bijvoorbeeld Medium -> High.
• Of het verzoek Render-blocking is of niet.
• Een uitsplitsing van de timing van verzoeken, die later wordt beschreven.

Als u op een verzoek klikt, tekent het spoor Netwerk een pijl van de initiator naar het verzoek.

Daarnaast toont het deelvenster Prestaties het tabblad Overzicht met meer informatie over de aanvraag, waaronder de velden Eerste prioriteit en (definitieve) Prioriteit. Als de waarden verschillen, is de ophaalprioriteit van het verzoek gewijzigd tijdens de opname. Ga voor meer informatie naar Resourcebelasting optimaliseren met de Fetch Priority API.

Op het tabblad Overzicht staat ook een uitsplitsing van de timing van het verzoek.

In dit voorbeeld wordt het verzoek voor www.google.com weergegeven door een lijn aan de linkerkant (|–), een balk in het midden met een donker en een licht gedeelte en een lijn aan de rechterkant (–|).

Als het tabblad Overzicht aanwezig is, toont het ook een uitsplitsing van servertimings voor netwerkverzoeken die technologieën voor weergave aan de serverzijde implementeren. Voor deze verzoeken haalt het deelvenster Prestaties de gegevens uit de Server-Timing-reactieheader.

Op het tabblad Netwerk vind je een andere uitsplitsing van de timing. Klik met de rechtermuisknop op het verzoek in de Netwerk-track of de URL op het tabblad Overzicht en klik op Tonen in het deelvenster Netwerk. DevTools brengt je naar het deelvenster Netwerk en selecteert het bijbehorende verzoek. Open het tabblad Timing.

Zo zijn deze 2 uitsplitsingen aan elkaar gekoppeld:

• De linkerlijn (|–) is alles tot en met de Connection starte groep gebeurtenissen. Met andere woorden: alles vóór Request Sent.
• Het lichte gedeelte van de balk is Request sent en Waiting for server response.
• Het donkere gedeelte van de balk is Content download.
• De rechterlijn (–|) is de tijd die is besteed aan wachten op de primaire thread. Het tabblad Netwerk > Timing toont dit niet.

Geheugenstatistieken bekijken

Vink het selectievakje Geheugen aan om geheugenstatistieken van de laatste opname te bekijken.

DevTools toont een nieuw Geheugen-diagram boven het tabblad Overzicht. Er is ook een nieuw diagram onder het diagram NET, genaamd HEAP. Het diagram HEAP biedt dezelfde informatie als de regel JS Heap in het diagram Geheugen.

Dit voorbeeld toont geheugenstatistieken boven het tabblad Overzicht.

De gekleurde lijnen in het diagram komen overeen met de gekleurde selectievakjes boven het diagram. Vink een selectievakje uit om die categorie te verbergen in het diagram.

Het diagram toont alleen de regio van de opname die is geselecteerd. In het eerdere voorbeeld toont het diagram Geheugen alleen het geheugengebruik voor het begin van de opname, tot ongeveer de markering van 1000 ms.

De duur van een gedeelte van een opname bekijken

Als je een gedeelte zoals Netwerk of Hoofd analyseert, heb je soms een nauwkeurigere schatting nodig van hoelang bepaalde gebeurtenissen hebben geduurd. Houd Shift ingedrukt, houd de muisknop ingedrukt en sleep naar links of rechts om een deel van de opname te selecteren. Onderaan je selectie toont DevTools hoelang dat gedeelte duurde.

In dit voorbeeld geeft het tijdstempel 488.53ms onderaan het geselecteerde gedeelte aan hoelang dat gedeelte duurde.

Een screenshot bekijken

Ga naar Screenshots maken tijdens opname voor meer informatie over hoe je screenshots aanzet.

Plaats de cursor op het Tijdlijnoverzicht om een screenshot te bekijken van hoe de pagina eruitzag op dat moment van de opname. Het Tijdlijnoverzicht is het gedeelte dat de diagrammen CPU, FPS en NET bevat.

Je kunt ook screenshots bekijken door op een frame te klikken in het gedeelte Frames. DevTools toont een kleine versie van het screenshot op het tabblad Overzicht.

Dit voorbeeld toont het screenshot voor het 195.5ms-frame op het tabblad Overzicht als u erop klikt in het gedeelte Frames.

Klik op de thumbnail op het tabblad Overzicht om in te zoomen op het screenshot.

Dit voorbeeld toont een ingezoomd screenshot nadat u op de thumbnail heeft geklikt op het tabblad Overzicht.

Laaginformatie bekijken

Zo bekijk je geavanceerde laaginformatie over een frame:

1. Zet geavanceerde instrumentatie voor schilderen aan.
2. Selecteer een frame in het gedeelte Frames. DevTools toont informatie over de lagen op het nieuwe tabblad Lagen, naast het tabblad Gebeurtenislogboek.

Plaats de cursor op een laag om deze in het diagram te markeren.

In dit voorbeeld is de laag #39 gemarkeerd als je de cursor erop plaatst.

Zo verplaats je het diagram:

• Klik op Panoramamodus om langs de X- en Y-as te bewegen.
• Klik op Draaimodus om te draaien langs de Z-as.
• Klik op Transformatie resetten om het diagram terug te zetten naar de oorspronkelijke positie.

Zo werkt laaganalyse:

Weergaveprofiler bekijken

Zo bekijk je geavanceerde informatie over een schilderevenement:

1. Geavanceerde instrumentatie voor tekenen aanzetten.
2. Selecteer een Paint-gebeurtenis in het Hoofd-track.

Weergaveprestaties analyseren met het tabblad Rendering

Gebruik de functies op het tabblad Rendering om de weergaveprestaties van je pagina te visualiseren.

Open het tabblad Rendering.

Frames per seconde in realtime bekijken met de FPS-meter

De statistieken voor framerendering zijn een overlay die rechtsboven in het weergavegebied verschijnt. Deze functie geeft een realtime schatting van FPS terwijl de pagina wordt uitgevoerd.

Ga naar Statistieken voor framerendering.

Schilderevenementen in realtime bekijken met Verf knippert

Gebruik Paint Flashing om een realtime overzicht te krijgen van alle paint-gebeurtenissen op de pagina.

Ga naar Verfglans.

Een overlay van lagen met laagranden bekijken

Gebruik Laagranden om een overlay van laagranden en tegels bovenaan de pagina te bekijken.

Ga naar Grenzen van lagen.

Problemen met de scrollprestaties in realtime vinden

Gebruik Problemen met scrollprestaties om elementen van de pagina te identificeren die gebeurtenislisteners hebben die gerelateerd zijn aan scrollen en die de prestaties van de pagina kunnen schaden. DevTools geeft de mogelijk problematische elementen aan in groenblauw.

Ga naar Prestatieproblemen met scrollen.