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

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.

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.

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.

Emuleer gelijktijdigheid van hardware

Om de applicatieprestaties met verschillende aantallen processorkernen te testen, kunt u de waarde configureren die wordt gerapporteerd door de eigenschap navigator.hardwareConcurrency . Sommige toepassingen gebruiken deze eigenschap om de mate van parallelliteit van hun toepassing te bepalen, bijvoorbeeld om de grootte van de Emscripten pthread-pool te bepalen.

Hardware-gelijktijdigheid emuleren:

1. Open de opname-instellingen menu. Zie Opname-instellingen weergeven .
2. Controleer Hardware-concurrency en stel het aantal cores in het invoervak ​​in.

DevTools geeft een waarschuwingspictogram weer naast het tabblad Prestaties om u eraan te herinneren dat hardware-concurrency-emulatie is ingeschakeld.

Om terug te keren naar de standaardwaarde van 10 , klikt u op Terugzetten knop.

Bewaar een opname

Om een ​​opname op te slaan, klikt u met de rechtermuisknop en selecteert u Profiel opslaan .

Laad een opname

Om een ​​opname te laden, klikt u met de rechtermuisknop en selecteert u Profiel laden .

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.

Navigeer door de opname

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.

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 naar het gekozen niveau 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 .

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.

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.

In het deelvenster Prestaties wordt knopinfo weergegeven 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 er meer informatie over te bekijken op het tabblad Samenvatting . 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

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 tijden

Bekijk op het Timings- circuit belangrijke markeringen zoals:

• Eerste verf (FP)
• Eerste inhoudsvolle verf (FCP)
• Grootste inhoudsvolle verf (LCP)
• DOMContentLoaded-gebeurtenis (DCL)
• Onload-evenement (L)
• Uw aangepaste performance.mark() -aanroepen. Hieronder wordt een individuele markering met tooltip weergegeven op 813,44 ms, met de naam Starten met het uitvoeren van JavaScript .
• Uw aangepaste 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 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 weergegeven. 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 over de lagen weer op het nieuwe tabblad Lagen , naast het tabblad Gebeurtenislogboek .

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

In dit voorbeeld wordt laag #39 gemarkeerd terwijl u erover beweegt.

Om het diagram te verplaatsen:

• Klik op Panmodus om langs de X- en Y-as te bewegen.
• Klik op Rotatiemodus om langs de Z-as te roteren.
• Klik op Transformatie opnieuw instellen om het diagram terug te zetten naar de oorspronkelijke positie.

Zie laaganalyse in actie:

Bekijk verfprofiler

Geavanceerde informatie over een verfevenement bekijken:

1. Schakel geavanceerde verfinstrumentatie in .
2. Selecteer een Paint- gebeurtenis op het hoofdspoor .

Analyseer de weergaveprestaties met het tabblad Rendering

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

Open het tabblad Renderen .

Bekijk frames per seconde in realtime met de FPS-meter

De frameweergavestatistieken zijn een overlay die in de rechterbovenhoek van uw kijkvenster verschijnt. Het biedt een realtime schatting van de FPS terwijl de pagina wordt uitgevoerd.

Zie Framerenderingstatistieken .

Bekijk schilderevenementen in realtime met Paint Flashing

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

Zie Verfflitsen .

Bekijk een overlay van lagen met laagranden

Gebruik Laagranden om een ​​overlay van laagranden en tegels bovenaan de pagina weer te geven.

Zie Laagranden .

Vind problemen met scrollprestaties in realtime

Gebruik Prestatieproblemen bij scrollen om elementen van de pagina te identificeren die gebeurtenislisteners hebben die verband houden met scrollen en die de prestaties van de pagina kunnen schaden. DevTools schetst de potentieel problematische elementen in groenblauw.

Zie Problemen met scrollprestaties .