Referentie prestatiekenmerken

Kayce Basques

Sofia Emelianova

Deze pagina is een uitgebreid naslagwerk van Chrome DevTools-functies met betrekking tot het analyseren van prestaties.

Zie Runtimeprestaties analyseren voor een begeleide tutorial over hoe u de prestaties van een pagina kunt analyseren met Chrome DevTools.

Recordprestaties

U kunt runtime- of laadprestaties vastleggen.

Registreer runtime-prestaties

Registreer runtimeprestaties wanneer u de prestaties van een pagina wilt analyseren terwijl deze wordt uitgevoerd, in plaats van tijdens het laden.

1. Ga naar de pagina die u wilt analyseren.
2. Klik op het tabblad Prestaties in DevTools.

3. Klik op Opnemen .

   

4. Interactie met de pagina. DevTools registreert alle pagina-activiteit die plaatsvindt als gevolg van uw interacties.

5. Klik nogmaals op Opnemen of klik op Stoppen om de opname te stoppen.

Registreer de laadprestaties

Leg de laadprestaties vast als u de prestaties van een pagina wilt analyseren terwijl deze wordt geladen, in plaats van wanneer deze actief is.

1. Ga naar de pagina die u wilt analyseren.
2. Open het prestatiepaneel van DevTools.

3. Klik op Start profilering en pagina opnieuw laden . DevTools navigeert eerst naar about:blank om eventuele resterende schermafbeeldingen en sporen te wissen. Vervolgens registreert DevTools prestatiestatistieken terwijl de pagina opnieuw wordt geladen en stopt de opname vervolgens automatisch een paar seconden nadat het laden is voltooid.

   

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

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

Maak screenshots tijdens het opnemen

Schakel het selectievakje Screenshots in om tijdens het opnemen een screenshot te maken van elk frame.

Zie Een screenshot bekijken om te leren hoe u met screenshots kunt omgaan.

Forceer afvalinzameling tijdens het opnemen

Terwijl u een pagina opneemt, klikt u op Vuilnismop verzamelen om de afvalinzameling te forceren.

Toon opname-instellingen

Klik op Instellingen vastleggen om meer instellingen bloot te leggen die verband houden met de manier waarop DevTools prestatie-opnamen vastlegt.

Schakel JavaScript-voorbeelden uit

Standaard geeft het hoofdspoor van een opname gedetailleerde call-stacks weer van JavaScript-functies die tijdens de opname zijn aangeroepen. Om deze call-stacks uit te schakelen:

1. Open de opname-instellingen menu. Zie Opname-instellingen weergeven .
2. Schakel het selectievakje JavaScript-voorbeelden uitschakelen in.
3. Maak een opname van de pagina.

De volgende schermafbeeldingen laten het verschil zien tussen het uitschakelen en inschakelen van JavaScript-voorbeelden. Het hoofdspoor van de opname is veel korter wanneer sampling is uitgeschakeld, omdat alle JavaScript-aanroepstacks worden weggelaten.

Dit voorbeeld toont een opname met uitgeschakelde JS-samples.

Dit voorbeeld toont een opname met ingeschakelde JS-samples.

Geef gas op het netwerk tijdens het opnemen

Het netwerk vertragen tijdens het opnemen:

1. Open de opname-instellingen menu. Zie Opname-instellingen weergeven .
2. Stel Netwerk in op het gekozen beperkingsniveau.

In het vervolgkeuzemenu kan het paneel Prestaties ook een standaardvoorinstelling voor beperking aanbevelen, of een voorinstelling die de ervaring van uw gebruikers benadert op basis van veldgegevens .

Geef gas tijdens het opnemen

Om de CPU te vertragen tijdens het opnemen:

1. Open de opname-instellingen menu. Zie Opname-instellingen weergeven .
2. Stel de CPU in op het gekozen beperkingsniveau.

Tip: Om mobiele apparaten uit het lagere en middensegment beter op elkaar af te stemmen, kunt u ook aangepaste CPU-beperkingsvoorinstellingen op uw apparaat kalibreren . Om dit te doen, selecteert u Kalibreren via Vastleginstellingen > CPU .

Het beperken is afhankelijk van de mogelijkheden van uw computer. De optie 2x vertraging zorgt er bijvoorbeeld voor dat uw CPU 2 keer langzamer werkt 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 vervolgkeuzemenu kan het paneel Prestaties ook een standaardvoorinstelling voor beperking aanbevelen, of een voorinstelling die de ervaring van uw gebruikers benadert op basis van veldgegevens .

Schakel CSS-selectorstatistieken in

Om de statistieken van uw CSS-regelselectors te bekijken tijdens langlopende Recalculate Style -gebeurtenissen:

1. Open de opname-instellingen menu. Zie Opname-instellingen weergeven .
2. Schakel het selectievakje CSS-selectorstatistieken inschakelen in.

Zie voor meer details hoe u de prestaties van de CSS-selector analyseert tijdens stijlgebeurtenissen opnieuw berekenen .

Schakel geavanceerde verfinstrumentatie in

Gedetailleerde verfinstrumentatie bekijken:

1. Open de opname-instellingen menu. Zie Opname-instellingen weergeven .
2. Schakel het selectievakje Geavanceerde verfinstrumentatie inschakelen in.

Zie Lagen bekijken en Verfprofiler bekijken voor meer informatie over hoe u met de verfinformatie kunt omgaan.

Annoteer een opname en deel deze

Zodra een prestatietracering is vastgelegd , kunt u deze analyseren en annoteren om uw bevindingen te delen.

Om een ​​opname te annoteren, opent u het tabblad Annotaties in de zijbalk left_panel_open aan de linkerkant van het paneel Prestaties . Er zijn verschillende manieren om een ​​annotatie toe te voegen:

• Labelitem : Om een ​​label aan een item toe te voegen, dubbelklikt u erop en typt u een label.
• Twee items verbinden : Om twee items met een pijl te verbinden, dubbelklikt u op het eerste item, klikt u op een pijl ernaast en klikt u vervolgens op het tweede item.
• Een tijdsperiode labelen : Om een ​​willekeurige tijdsperiode te labelen, sleept u Shift-sleep vanaf het begin van een tijdsperiode naar het einde en typt u vervolgens een label.

In dit voorbeeld zijn er in de netwerktrack twee geannoteerde verzoeken, een verbinding daartussen, en een geannoteerd tijdsbereik dat roze is gemarkeerd. Het tabblad Annotaties toont het aantal annotaties naast de tabbladnaam, in dit voorbeeld 4.

Om een ​​annotatie te verwijderen, beweegt u de muis eroverheen op het tabblad Annotaties en klikt u op de knop Verwijderen ernaast.

Om annotaties te verbergen voor de prestatietracering, vinkt u check_box Annotaties verbergen aan onder aan het tabblad Annotaties .

Bewaar en deel een opname

Als u een opname wilt opslaan en deze later wilt delen met uw geannoteerde prestatiebevindingen, klikt u in de actiebalk bovenaan het prestatiepaneel op downloaden Downloaden en selecteert u Trace opslaan .

U kunt ook Traceren zonder annotaties opslaan selecteren.

Laad een opname

Om een ​​opname te laden, klikt u op Uploaden Uploaden in de actiebalk bovenaan het paneel Prestaties .

In het deelvenster Prestaties worden annotaties weergegeven als deze in de trace aanwezig zijn.

Wis de vorige opname

Nadat u een opname hebt gemaakt, drukt u op Opname wissen om die opname uit het prestatiepaneel te wissen.

Analyseer een uitvoeringsopname

Nadat u de runtimeprestaties of de laadprestaties hebt vastgelegd, biedt het paneel Prestaties veel gegevens voor het analyseren van de prestaties van wat er zojuist is gebeurd.

Krijg bruikbare inzichten

Het Prestatiepaneel consolideert prestatie-inzichten uit het Lighthouse -rapport en het nu verouderde paneel Prestatie-inzichten . Deze inzichten kunnen manieren voorstellen om de prestaties te verbeteren en een begeleide analyse bieden van de volgende prestatieproblemen, inclusief maar niet beperkt tot:

• LCP en INP per subonderdeel
• Ontdekking van LCP-verzoeken
• De boosdoeners van de indelingsverschuiving
• Geef blokkeringsverzoeken weer
• Derden
• Levering van afbeeldingen
• Latentie van documentverzoeken
• Viewport-optimalisatie voor mobiel
• CSS-selectorkosten

Om inzichten te gebruiken:

1. Maak een uitvoeringsopname .
2. Open in de linkerzijbalk van het prestatiepaneel het tabblad Inzichten , vouw verschillende secties uit, plaats de muisaanwijzer op items en klik erop. Het Prestatiepaneel zal de corresponderende gebeurtenissen in de trace markeren.

Navigeer door de opname

Om u te helpen navigeren, terwijl u de prestatietracering aanwijst, doet het paneel Prestaties het volgende:

• Toont u een verticale markering die het gehele prestatietracé omspant wanneer u de muisaanwijzer op het tijdlijnoverzicht plaatst.
• Markeert een bereik in het tijdlijnoverzicht wanneer u over items in de hoofdtrack beweegt.

Om uw uitvoeringsopname nauwkeurig te inspecteren, kunt u een deel van een opname selecteren, door een lange vlammengrafiek scrollen, in- en uitzoomen en broodkruimels gebruiken om tussen zoomniveaus te springen.

Gebruik sneltoetsen om te navigeren

Als u sneltoetsen wilt gebruiken om snel door de opname te navigeren, kiest u eerst de gewenste toetsenbordnavigatiestijl.

Klik in de rechterbovenhoek van het paneel op Help Snelkoppelingen weergeven en selecteer een van de volgende opties:

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

Het dialoogvenster met snelkoppelingen biedt u ook een spiekbriefje met de beschikbare snelkoppelingen.

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

Selecteer een deel van de opname

Onder de actiebalk van het prestatiepaneel en bovenaan de opname ziet u het tijdlijnoverzicht met de CPU- en NET -grafieken.

Om een ​​deel van een opname te selecteren, klikt u op de knop, houdt u deze ingedrukt en sleept u vervolgens naar links of rechts over het tijdlijnoverzicht .

Om een ​​portie te selecteren met behulp van het toetsenbord:

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

Een gedeelte selecteren met een trackpad:

1. Beweeg over het tijdlijnoverzichtgedeelte of een van de tracks ( Main en zijn buren).
2. Veeg met twee vingers omhoog om uit te zoomen, veeg naar links om naar links te gaan, veeg omlaag om in te zoomen en veeg naar rechts om naar rechts te gaan.

Maak broodkruimels en spring tussen zoomniveaus

Met het tijdlijnoverzicht kunt u meerdere geneste broodkruimels achter elkaar maken, de zoomniveaus verhogen en vervolgens vrijelijk tussen zoomniveaus springen.

Broodkruimels maken en gebruiken:

1. Selecteer in Tijdlijnoverzicht een gedeelte van de opname.
2. Beweeg over de selectie en klik op de knop N ms zoom_in . De selectie wordt groter en vult het tijdlijnoverzicht . Bovenaan het tijdlijnoverzicht begint zich een keten van broodkruimels op te bouwen.
3. Herhaal de vorige twee stappen om nog een geneste broodkruimel te maken. U kunt doorgaan met het nesten van broodkruimels zolang het selectiebereik groter is dan 5 milliseconden.
4. Om naar een gekozen zoomniveau te springen, klikt u op de bijbehorende broodkruimel in de keten bovenaan het tijdlijnoverzicht .

Als u de onderliggende broodkruimels van een broodkruimel wilt verwijderen, klikt u met de rechtermuisknop op de bovenliggende broodkruimel en selecteert u Onderliggende broodkruimels verwijderen .

Blader door een lange vlammengrafiek

Om door een lange vlammengrafiek op het hoofdspoor of een van de aangrenzende sporen te scrollen, klikt u en houdt u de muisknop ingedrukt en sleept u vervolgens in een willekeurige richting totdat wat u zoekt in beeld komt.

Negeer irrelevante scripts in het vlamdiagram

Om u beter op uw code te kunnen concentreren, kunt u irrelevante scripts toevoegen aan de negeerlijst.

Voer een van de volgende handelingen uit om scripts te negeren:

• Klik op comprimeren Dialoogvenster Negeerlijstinstellingen weergeven in de bovenste actiebalk en typ een reguliere expressie in het invoerveld. Het vlammendiagram past de nieuwe regel toe terwijl u typt.
• Klik met de rechtermuisknop op een script en selecteer Script toevoegen aan negeerlijst . Het paneel Prestaties voegt dit script toe aan de lijst in het gecomprimeerde dialoogvenster Negeerlijstinstellingen weergeven .

Het paneel zal overmatig nesten voor dergelijke scripts automatisch samenvouwen en ze markeren als On ignore list ( REGULAR_EXPRESSION ) .

In het dialoogvenster Instellingen voor negeerlijst tonen comprimeren kunt u de regels voor de negeerlijst in- en uitschakelen.

Om een ​​script uit de negeerlijst te verwijderen, klikt u er met de rechtermuisknop op in het vlamdiagram en selecteert u Script uit de negeerlijst verwijderen of beweegt u de muis eroverheen in het dialoogvenster Instellingen negeerlijst weergeven en klikt u op Verwijderen .

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

Als u zich alleen op first-party scripts wilt concentreren, vinkt u bovendien check_box Dim 3rd Parties aan. In het Prestatiepaneel worden scripts van derden grijs weergegeven.

Zoek activiteiten

U kunt zoeken tussen de activiteiten in het Hoofdspoor en aanvragen in het Netwerkspoor .

Om een ​​zoekvak onder aan het prestatiepaneel te openen, drukt u op:

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

Dit voorbeeld toont een reguliere expressie in het zoekvak onderaan die elke activiteit vindt die begint met E .

Activiteiten doorlopen die overeenkomen met uw vraag:

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

Het deelvenster Prestaties toont knopinfo over de activiteit die in het zoekvak is geselecteerd.

Query-instellingen wijzigen:

• Klik op match_case Match case om de zoekopdracht hoofdlettergevoelig te maken.
• Klik op reguliere_expressie Reguliere expressie om een ​​reguliere expressie in uw query te gebruiken.

Om het zoekvak te verbergen, klikt u op Annuleren .

Verander de volgorde van de nummers en verberg ze

Om de prestatietracering overzichtelijker te maken, kunt u de volgorde van de tracks wijzigen en de irrelevante tracks verbergen in de trackconfiguratiemodus.

Tracks verplaatsen en verbergen:

1. Om de configuratiemodus te openen, klikt u met de rechtermuisknop op een tracknaam en selecteert u Tracks configureren .
2. Klik op arrow_upward up of arrow_downward down om een ​​track omhoog of omlaag te verplaatsen. Klik op zichtbaarheid_off om het te verbergen.
3. Wanneer u klaar bent, klikt u onderaan op Configuratie van tracks voltooien om de configuratiemodus te verlaten.

Bekijk de video om deze workflow in actie te zien.

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

Bekijk hoofdthreadactiviteit

Gebruik het hoofdspoor om de activiteit te bekijken die heeft plaatsgevonden op de hoofdthread van de pagina.

Klik op een gebeurtenis om meer informatie erover te bekijken op het tabblad Samenvatting , inclusief maar niet beperkt tot: timings, stacktraces, koppelingen naar overeenkomstige scripts en eventuele namen van derden. Het Prestatiepaneel schetst de geselecteerde gebeurtenis in blauw.

In dit voorbeeld ziet u meer informatie over de get -functieaanroepgebeurtenis op het tabblad Samenvatting .

Lees het vlammendiagram

Het Prestatiepaneel vertegenwoordigt de hoofdthreadactiviteit in een vlammendiagram. De x-as vertegenwoordigt de opname in de loop van de tijd. De y-as vertegenwoordigt de call-stack. De gebeurtenissen bovenaan veroorzaken de onderstaande gebeurtenissen.

Dit voorbeeld toont een vlammendiagram in het hoofdspoor . Een click veroorzaakte een anonieme functieaanroep. Deze functie riep op zijn beurt onEndpointClick_ aan, die handleClick_ aanriep, enzovoort.

Het paneel Prestaties wijst willekeurige kleuren aan scripts toe om de vlammenkaart op te splitsen en leesbaarder te maken. In het eerdere voorbeeld zijn functieaanroepen van één script lichtblauw gekleurd. Oproepen van een ander script zijn lichtroze gekleurd. Het donkerdere geel vertegenwoordigt scriptactiviteit en de paarse gebeurtenis vertegenwoordigt renderingactiviteit. Deze donkerder gele en paarse gebeurtenissen zijn consistent in alle opnames.

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

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

Bovendien toont het hoofdspoor informatie over CPU-profielen die zijn gestart en gestopt met de consolefuncties profile() en profileEnd() .

Zie JavaScript-voorbeelden uitschakelen om het gedetailleerde vlammendiagram van JavaScript-aanroepen te verbergen. Wanneer JS-voorbeelden zijn uitgeschakeld, ziet u alleen de gebeurtenissen op hoog niveau, zoals Event (click) en Function Call .

Volg initiatiefnemers van evenementen

Op het hoofdspoor kunnen pijlen worden weergegeven die de volgende initiatiefnemers met elkaar verbinden en de gebeurtenissen die ze hebben veroorzaakt:

• Ongeldigheid van stijl of lay-out -> Stijlen of lay-out opnieuw berekenen
• Animatieframe aanvragen -> Animatieframe geactiveerd
• Inactief terugbellen aanvragen -> Inactief terugbellen activeren
• Installatietimer -> Timer geactiveerd
• Maak een WebSocket -> Verzenden... en ontvang een WebSocket-handshake of vernietig WebSocket
• PostTask plannen -> PostTask afvuren of postTask afbreken

Om de pijlen te zien, zoek je een initiator of de gebeurtenis die deze veroorzaakte in de vlammenkaart en selecteer je deze.

Indien geselecteerd, toont het tabblad Samenvatting Initiator voor links voor initiatiefnemers en Geïnitieerd door links voor de gebeurtenissen die ze hebben veroorzaakt. Klik erop om tussen de overeenkomstige gebeurtenissen te springen.

Verberg functies en hun kinderen in de vlammengrafiek

Om het vlammendiagram in de hoofdthread overzichtelijker te maken, kunt u geselecteerde functies of hun onderliggende functies verbergen:

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

   • Functie verbergen ( H )
   • Kinderen verbergen ( C )
   • Herhalende kinderen verbergen ( R )
   • Kinderen resetten ( U )
   • Tracering opnieuw instellen ( T )
   • Script toevoegen aan negeerlijst ( I )

   

   Er verschijnt een vervolgkeuzeknop arrow_drop_down naast de functienaam met verborgen onderliggende elementen.

2. Om het aantal verborgen kinderen te zien, beweegt u de muis over de vervolgkeuzeknop arrow_drop_down .

   

3. Om een ​​functie met verborgen kinderen of de hele vlammenkaart te resetten, selecteert u de functie en drukt U op U of klikt u met de rechtermuisknop op een functie en selecteert u Trace traceren .

Negeer scripts in het vlammendiagram

Om een ​​script aan de negeerlijst toe te voegen, klikt u met de rechtermuisknop op een script in het diagram en selecteert u Script toevoegen aan negeerlijst .

Het diagram vouwt genegeerde scripts samen, markeert ze als Op negeerlijst en voegt ze toe aan de Aangepaste uitsluitingsregels in instellingen Instellingen > Negeerlijst . Genegeerde scripts worden opgeslagen totdat u ze uit de tracering of uit de aangepaste uitsluitingsregels verwijdert.

Bekijk activiteiten in een tabel

Nadat u een pagina hebt opgenomen, hoeft u niet alleen op het hoofdspoor te vertrouwen om activiteiten te analyseren. DevTools biedt ook drie tabelweergaven voor het analyseren van activiteiten. Elke weergave geeft u een ander perspectief op de activiteiten:

• Als u de hoofdactiviteiten wilt bekijken die het meeste werk veroorzaken, gebruikt u het tabblad Call Tree .
• Wanneer u de activiteiten wilt bekijken waaraan direct de meeste tijd is besteed, gebruikt u het tabblad Bottom-Up .
• Als u de activiteiten wilt bekijken in de volgorde waarin ze plaatsvonden tijdens de opname, gebruikt u het tabblad Gebeurtenislogboek .

Om u te helpen sneller te vinden wat u zoekt, hebben alle drie de tabbladen knoppen voor geavanceerd filteren naast de filterbalk :

• match_case Overeenkomstgeval .
• reguliere_expressie Reguliere expressie .
• match_word Zoek het hele woord .

Elke tabelweergave in het deelvenster Prestaties toont koppelingen voor activiteiten zoals functieaanroepen. Om u te helpen bij het opsporen van fouten, vindt DevTools de overeenkomstige functiedeclaraties in bronbestanden. Als de juiste bronkaarten aanwezig en ingeschakeld zijn, vindt DevTools bovendien automatisch de originele bestanden.

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

Opmerking: de volgende drie secties verwijzen allemaal naar dezelfde demo. U kunt de demo zelf uitvoeren op Activity Tabs Demo en de broncode bekijken op GoogleChrome/devtools-samples/perf/activitytabs.html .

Root-activiteiten

Hier volgt een uitleg van het concept van hoofdactiviteiten dat wordt vermeld in de secties Oproepboom , Bottom-Up en Gebeurtenislogboek .

Root-activiteiten zijn activiteiten die ervoor zorgen dat de browser wat werk doet. Wanneer u bijvoorbeeld op een pagina klikt, activeert de browser een Event als hoofdactiviteit. Die Event kan er dan voor zorgen dat een handler wordt uitgevoerd.

In het vlammendiagram van het hoofdtrack staan ​​de hoofdactiviteiten bovenaan het diagram. Op de tabbladen Oproepboom en Gebeurtenislogboek zijn rootactiviteiten de items op het hoogste niveau.

Zie het tabblad Oproepboom voor een voorbeeld van rootactiviteiten.

Het tabblad Oproepboom

Gebruik het tabblad Call Tree om te bekijken welke rootactiviteiten het meeste werk veroorzaken.

Op het tabblad Oproepboom worden alleen activiteiten weergegeven tijdens het geselecteerde gedeelte van de opname. Zie Een gedeelte van een opname selecteren voor informatie over het selecteren van gedeelten.

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 call-stack. In dit voorbeeld veroorzaakte de Event de Function Call , die button.addEventListener veroorzaakte, wat b veroorzaakte, enzovoort.

Zelftijd vertegenwoordigt de tijd die direct aan die activiteit wordt besteed. Totale tijd vertegenwoordigt de tijd die is doorgebracht in die activiteit of een van de onderliggende activiteiten ervan.

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

Gebruik het vak Filter om gebeurtenissen te filteren op activiteitsnaam.

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

Klik op Zwaarste stapel weergeven om een ​​andere tabel rechts van de activiteitentabel weer te geven. Klik op een activiteit om de tabel met de zwaarste stapel in te vullen. In de tabel Zwaarste stapel ziet u welke kinderen van de geselecteerde activiteit de langste tijd nodig hadden om uit te voeren.

Het tabblad Bottom-Up

Gebruik het tabblad Bottom-Up om te bekijken welke activiteiten in totaal direct de meeste tijd in beslag namen.

Op het tabblad Bottom-Up worden alleen activiteiten weergegeven tijdens het geselecteerde gedeelte van de opname. Zie Een gedeelte van een opname selecteren voor informatie over het selecteren van gedeelten.

In het vlamdiagram van het hoofdspoor van dit voorbeeld kun je zien dat bijna alle tijd werd besteed aan het uitvoeren van de drie oproepen tot wait() . De belangrijkste activiteit op het tabblad Bottom-Up is dus wait . In de vlammengrafiek zijn de gele oproepen onder de oproepen om te wait feitelijk duizenden Minor GC oproepen. Dienovereenkomstig kunt u zien dat op het tabblad Bottom-Up de op een na duurste activiteit Minor GC is.

De kolom Zelftijd vertegenwoordigt de totale tijd die rechtstreeks aan die activiteit is besteed, in alle gevallen ervan.

De kolom Totale tijd vertegenwoordigt de totale tijd die is doorgebracht in die activiteit of een van de onderliggende activiteiten ervan.

Het tabblad Gebeurtenislogboek

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

Op het tabblad Gebeurtenislogboek worden alleen activiteiten weergegeven tijdens het geselecteerde gedeelte van de opname. Zie Een gedeelte van een opname selecteren voor informatie over het selecteren van gedeelten.

De kolom Starttijd vertegenwoordigt het punt waarop die activiteit begon, relatief ten opzichte van het begin van de opname. De starttijd van 1573.0 ms voor het geselecteerde item in dit voorbeeld betekent dat de activiteit 1573 ms na het starten van de opname begon.

De kolom Zelftijd vertegenwoordigt de tijd die rechtstreeks aan die activiteit wordt besteed.

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

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

Gebruik het filtervak ​​om activiteiten op naam te filteren.

Gebruik het menu Duur om activiteiten eruit te filteren die minder dan 1 ms of 15 ms duurden. Standaard is het menu Duur ingesteld op Alles , wat betekent dat alle activiteiten worden weergegeven.

Schakel de selectievakjes Loading , Scripting , Rendering of Painting uit om alle activiteiten uit die categorieën te filteren.

Bekijk prestatiemarkeringen

In een overlay met verticale lijnen over het prestatiespoor ziet u belangrijke prestatiemarkeringen, zoals:

• Eerste verf (FP)
• Eerste inhoudsvolle verf (FCP)
• Grootste inhoudsvolle verf (LCP)
• DOMContentLoaded-gebeurtenis (DCL)
• Onload-evenement (L)

Beweeg over de namen van de markeringen onder aan de trace om hun tijdstempel te zien.

Bekijk aangepaste timings

Bekijk op het Timings -circuit uw aangepaste prestatiemarkeringen, zoals:

• performance.mark() oproepen. Hieronder wordt een individuele markering met tooltip weergegeven op 813,44 ms, met de naam Starten met het uitvoeren van JavaScript .
• performance.measure() -aanroepen. Hieronder wordt een gele spanwijdte weergegeven met de naam Slow Interaction .

Selecteer een markering om meer details te zien op het tabblad Samenvatting , inclusief de tijdstempel, totale tijd, zelftijd en het detail . Voor performance.mark() - en performance.measure() aanroepen toont het tabblad ook stacktraces.

Bekijk interacties

Bekijk gebruikersinteracties op het Interacties -spoor om potentiële problemen met de responsiviteit op te sporen.

Interacties bekijken:

1. Open bijvoorbeeld DevTools op deze demopagina .
2. Open het prestatiepaneel en start een opname .
3. Klik op een element (koffie) en stop de opname.
4. Zoek het interactiespoor in de tijdlijn.

In dit voorbeeld toont het interactiespoor de aanwijzerinteractie . Interacties hebben snorharen die vertragingen in de invoer en presentatie aangeven bij de grenzen van de verwerkingstijd. Beweeg de muis over de interactie om tooltip te zien met invoervertraging, verwerkingstijd en presentatievertraging.

Het Interacties -spoor toont ook Interaction to Next Paint (INP) -waarschuwingen voor interacties langer dan 200 milliseconden op het tabblad Samenvatting en in een tooltip bij het aanwijzen van de muis:

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

Bekijk lay-outverschuivingen

Bekijk lay-outverschuivingen op het spoor Lay-outverschuivingen . Verschuivingen worden weergegeven als paarse diamanten en zijn gegroepeerd in clusters (paarse lijnen) op basis van hun nabijheid op de tijdlijn.

Om een ​​element te markeren dat een lay-outverschuiving in het venster veroorzaakte, beweegt u de muis over de overeenkomstige diamant.

Als u meer informatie wilt zien over een lay-outverschuiving of -verschuivingen op het tabblad Samenvatting met timings, scores, elementen en potentiële boosdoeners, klikt u op de bijbehorende ruit of cluster.

Zie Cumulatieve lay-outverschuiving (CLS) voor meer informatie.

Bekijk animaties

Bekijk animaties op het animatiespoor . Animaties worden genoemd als overeenkomstige CSS-eigenschappen of eventuele elementen, bijvoorbeeld transform of my-element . Animaties die geen compositie vormen, zijn gemarkeerd met rode driehoekjes in de rechterbovenhoek.

Selecteer een animatie om meer details op het tabblad Samenvatting te zien, inclusief de redenen voor mislukte composities.

Bekijk GPU-activiteit

Bekijk GPU-activiteit in het GPU- gedeelte.

Bekijk rasteractiviteit

Bekijk rasteractiviteit in de sectie Threadpool .

Analyseer frames per seconde (FPS)

DevTools biedt talloze manieren om frames per seconde te analyseren:

• Gebruik het gedeelte Frames om te zien hoe lang een bepaald frame duurde.
• Gebruik de FPS-meter voor een realtime schatting van de FPS terwijl de pagina wordt uitgevoerd. Zie Frames per seconde in realtime bekijken met de FPS-meter .

De sectie Frames

In het gedeelte Frames kunt u precies zien hoe lang een bepaald frame duurde.

Beweeg over een frame om tooltip te bekijken met meer informatie erover.

Dit voorbeeld toont tooltip wanneer u over een frame beweegt.

In de sectie Frames kunnen vier typen frames worden weergegeven:

1. Stationair frame (wit) . Geen wijzigingen.
2. Kader (groen) . Geleverd zoals verwacht en op tijd.
3. Gedeeltelijk gepresenteerd frame (geel met een dun, breed streepjespatroon) . Chrome heeft zijn best gedaan om op zijn minst enkele visuele updates op tijd weer te geven. Bijvoorbeeld als het werk van de hoofdthread van het rendererproces (canvasanimatie) laat is, maar de compositorthread (scrollen) op tijd is.
4. Verlaagd frame (rood met een dicht patroon van ononderbroken lijnen) . Chrome kan het frame niet binnen een redelijke tijd weergeven.

Dit voorbeeld toont tooltip wanneer u over een gedeeltelijk weergegeven frame beweegt.

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

Bekijk netwerkverzoeken

Vouw de sectie Netwerk uit om een ​​waterval van netwerkverzoeken te bekijken die plaatsvonden tijdens de opname van de uitvoering.

Naast de netwerktracknaam staat een legenda met kleurgecodeerde verzoektypen.

Renderblokkeringsverzoeken zijn gemarkeerd met een rode driehoek in de rechterbovenhoek.

Beweeg de muis over een verzoek om tooltip te zien 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 overzicht van de aanvraagtijden, zoals later beschreven.

Wanneer u op een verzoek klikt, tekent het netwerkspoor een pijl van de initiator naar het verzoek.

Bovendien toont het paneel Prestaties u het tabblad Samenvatting met meer informatie over het verzoek, inclusief maar niet beperkt tot de velden Initiële prioriteit en (eind) prioriteit . Als hun waarden verschillen, is de ophaalprioriteit van het verzoek gewijzigd tijdens de opname. Zie Het laden van bronnen optimaliseren met de Fetch Priority API voor meer informatie.

Het tabblad Samenvatting toont ook een overzicht van de timing van het verzoek.

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

Een ander tijdsoverzicht vindt u op het tabblad Netwerk . Klik met de rechtermuisknop op het verzoek in de netwerktrack of de URL ervan op het tabblad Samenvatting en klik op Openbaar maken in het netwerkpaneel . DevTools brengt u naar het netwerkpaneel en selecteert het bijbehorende verzoek. Open het tabblad Timing .

Hier ziet u hoe deze twee uitsplitsingen met elkaar in verband staan:

• De linkerregel ( |– ) is alles tot aan de Connection start met gebeurtenissen, inclusief. Met andere woorden, het is 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 rechter regel ( –| ) is de tijd die wordt besteed aan het wachten op de hoofdthread. Het tabblad Netwerk > Timing laat dit niet zien.

Bekijk geheugenstatistieken

Schakel het selectievakje Geheugen in om geheugenstatistieken van de laatste opname te bekijken.

DevTools geeft een nieuw geheugendiagram weer, boven het tabblad Samenvatting . Er is ook een nieuw diagram onder het NET- diagram, genaamd HEAP . Het HEAP -diagram biedt dezelfde informatie als de JS Heap -regel in het geheugendiagram .

In dit voorbeeld worden geheugenstatistieken weergegeven boven het tabblad Samenvatting .

De gekleurde lijnen op de kaart verwijzen naar de gekleurde selectievakjes boven de kaart. Schakel een selectievakje uit om die categorie in het diagram te verbergen.

Het diagram toont alleen het gebied van de opname dat is geselecteerd. In het eerdere voorbeeld toont het geheugendiagram alleen het geheugengebruik voor het begin van de opname, tot ongeveer 1000 ms.

Bekijk de duur van een gedeelte van een opname

Wanneer u een sectie als Netwerk of Hoofd analyseert, heeft u soms een nauwkeurigere schatting nodig van hoe lang bepaalde gebeurtenissen hebben geduurd. Houd Shift ingedrukt, klik en houd vast en sleep naar links of rechts om een ​​deel van de opname te selecteren. Onderaan uw selectie laat DevTools zien hoe lang dat gedeelte duurde.

In dit voorbeeld geeft de tijdstempel 488.53ms onder aan het geselecteerde gedeelte aan hoe lang dat gedeelte duurde.

Bekijk een schermafdruk

Zie Schermafbeeldingen maken tijdens het opnemen voor meer informatie over het inschakelen van schermafbeeldingen.

Beweeg over het tijdlijnoverzicht om een ​​screenshot te bekijken van hoe de pagina er op dat moment van de opname uitzag. Het tijdlijnoverzicht is de sectie die de CPU- , FPS- en NET -grafieken bevat.

U kunt ook schermafbeeldingen bekijken door op een frame in de sectie Frames te klikken. DevTools geeft een kleine versie van de schermafbeelding weer op het tabblad Samenvatting .

Dit voorbeeld toont de schermafbeelding voor het frame 195.5ms op het tabblad Samenvatting wanneer u erop klikt in de sectie Frames .

Klik op de miniatuur op het tabblad Samenvatting om in te zoomen op de schermafbeelding.

Dit voorbeeld toont een ingezoomde schermafbeelding nadat u op de miniatuur ervan op het tabblad Samenvatting hebt geklikt.

Bekijk lageninformatie

Geavanceerde laaginformatie over een frame bekijken:

1. Schakel geavanceerde verfinstrumentatie in .
2. Selecteer een frame in de sectie Frames . DevTools geeft informatie weer over de lagen op het tabblad Nieuwe lagen , naast het tabblad Evenementlogboek .

Beweeg over een laag om het in het diagram te markeren.

Dit voorbeeld toont de laag #39 gemarkeerd terwijl u erover zweeft.

Om het diagram te verplaatsen:

• Klik op PAN -modus om langs de X- en Y -assen te bewegen.
• Klik op Rotate modus om te roteren langs de z -as.
• Klik op Reset Transform om het diagram opnieuw in te stellen naar zijn oorspronkelijke positie.

Zie laaganalyse in actie:

Bekijk Paint Profiler

Om geavanceerde informatie over een verfevenement te bekijken:

1. Geavanceerde verfinstrumentatie inschakelen .
2. Selecteer een verfevenement in het hoofdspoor .

Analyseer de renderingprestaties met het tabblad Rendering

Gebruik de functies van het Tab van de weergave om de weergaveprestaties van uw pagina te visualiseren.

Open het tabblad Rendering .

Bekijk frames per seconde in realtime met de FPS -meter

De frame-renderingstatistieken is een overlay die in de rechterbovenhoek van uw viewport verschijnt. Het biedt een realtime schatting van FPS terwijl de pagina wordt uitgevoerd.

Zie frame rendering statistieken .

Bekijk schilderevenementen in realtime met verfflitsen

Gebruik verfflitsen om een ​​realtime weergave te krijgen van alle verfgebeurtenissen op de pagina.

Zie verf knipperen .

Bekijk een overlay van lagen met laaggrenzen

Gebruik laagranden om een ​​overlay van laaggrenzen en tegels bovenop de pagina te bekijken.

Zie Laaggrenzen .

Vind in realtime scrollprestatieproblemen

Gebruik scrollingprestatieproblemen om elementen van de pagina te identificeren die luisteraars van gebeurtenis hebben met betrekking tot scrollen die de prestaties van de pagina kunnen schaden. DevTools schetst de potentieel-problemen in groenblauw.

Zie Scrolling -prestatieproblemen .