Gebruik het prestatiepaneel om de prestaties van uw website te analyseren.
Overzicht
In het Prestatiepaneel kunt u CPU-prestatieprofielen van uw webapplicaties vastleggen. Analyseer profielen om potentiële knelpunten in de prestaties te vinden en manieren waarop u het gebruik van resources kunt optimaliseren.
Gebruik het paneel Prestaties om het volgende te doen:
- Leg een prestatieprofiel vast.
- Wijzig de opname-instellingen.
- Analyseer een prestatierapport.
Zie Runtimeprestaties analyseren voor een uitgebreide handleiding over het verbeteren van de prestaties van uw website.
Open het Prestatiepaneel
Om het Prestatiepaneel te openen, opent u DevTools en selecteert u Prestaties in een reeks tabbladen bovenaan.
U kunt ook deze stappen volgen om het paneel Prestaties te openen via het menu Commando :
- Open DevTools .
- Open het Commandomenu door op te drukken:
- macOS: Command + Shift + P
- Windows, Linux, ChromeOS: Control + Shift + P
- Begin met het typen
Performance panel, selecteer Prestatiepaneel weergeven en druk op Enter .
Leg een prestatieprofiel vast
Wanneer u klaar bent om op te nemen, biedt het paneel Prestaties u de volgende opties:
- Registreer runtime-prestaties
- Registreer de laadprestaties
- Maak screenshots tijdens het opnemen
- Forceer afvalinzameling tijdens het opnemen
- Bewaar een opname
- Laad een opname
- Een opname wissen
Wijzig de opname-instellingen
Met de opname-instellingen kunt u wijzigen hoe DevTools prestatieregistraties vastlegt en kunt u aanvullende informatie in het rapport krijgen. Klik op Instellingen voor opname-instellingen om het menu Instellingen voor opname te openen.
Selecteer de volgende opties in het menu Opname-instellingen :
- JavaScript-voorbeelden uitschakelen : Schakelt de opname uit van de JavaScript-aanroepstapels die worden weergegeven in de hoofdtrack en die worden aangeroepen tijdens de opname. Zal de prestatieoverhead verminderen.
- Geavanceerde verfinstrumentatie inschakelen (langzaam) : legt geavanceerde verfinstrumentatie vast. Belemmert de prestaties aanzienlijk.
- CSS-selectorstatistieken inschakelen (langzaam) : legt CSS-selectorstatistieken vast. Belemmert de prestaties aanzienlijk.
- CPU-beperking : Simuleer lagere CPU-snelheden.
- Netwerkbeperking : Simuleer lagere netwerksnelheden.
- Hardware-concurrency : Configureer de waarde die wordt gerapporteerd door
navigator.hardwareConcurrency.
Analyseer een prestatierapport
Zie Een uitvoeringsopname analyseren voor een complete handleiding over het gebruik van het deelvenster Prestaties .
Hieronder vindt u een groep onderwerpen uit de gids, plus andere nuttige documentatie:
Zo leert u hoe u door het rapport navigeert:
Om te leren hoe u zich kunt concentreren op wat belangrijk is voor uw workflow:
- Verander de volgorde van de nummers en verberg ze
- Verberg functies en hun kinderen in de vlammengrafiek
- Maak broodkruimels en spring tussen zoomniveaus
Voor meer informatie over de tabbladen Bottom-up, Oproepboom en Gebeurtenislogboek:
Zo leert u hoe u het rapport analyseert:
- Bekijk hoofdthreadactiviteit
- Lees het vlammendiagram
- Bekijk een schermafbeelding
- Bekijk geheugenstatistieken
- Bekijk de duur van een gedeelte van een opname
- Analyseer de prestaties van de CSS-selector tijdens stijlherberekeningsgebeurtenissen
- Profileer de prestaties van Node.js met het paneel Prestaties
- Analyseer frames per seconde (FPS)
- Referentie van tijdlijngebeurtenissen
Verbeter de prestaties met deze panelen
Ontdek andere panelen waarmee u de prestaties van uw website kunt verbeteren:
- Lighthouse: Optimaliseer de snelheid van de website
- Geheugen: Overzicht geheugenpaneel
- Prestatie-inzichten: krijg bruikbare inzichten in de prestaties van uw website
- Rendering: Ontdek problemen met renderingprestaties
- Problemen: problemen opsporen en oplossen
- Prestaties: informatie over lagen bekijken