Gebruik de Prestatiemonitor om snel een idee te krijgen van de belasting en runtimeprestaties van uw site.
Overzicht
Het paneel Prestatiemonitor geeft een tijdlijn weer die prestatiestatistieken in realtime in een grafiek weergeeft. Klik op een statistiek om deze weer te geven of te verbergen. Bekijk vervolgens hoe de grafiek verandert terwijl u met uw app communiceert.
De prestatiemonitor houdt de volgende statistieken bij:
- CPU gebruik.
- JavaScript-heapgrootte.
- Het totale aantal DOM-knooppunten, JavaScript-gebeurtenislisteners, documenten en frames op de pagina.
- Lay-outs en stijlherberekeningen per seconde.
Open het paneel Prestatiemonitor
Om het Prestatiemonitorpaneel te openen:
- Open DevTools .
- Open het Commandomenu door op te drukken:
- macOS: Command + Shift + P
- Windows, Linux, ChromeOS: Control + Shift + P
- Begin met het typen
Performance monitor, selecteer Prestatiemonitor weergeven en druk op Enter . DevTools geeft het paneel Prestatiemonitor weer onder aan uw DevTools-venster.
U kunt ook in de rechterbovenhoek more_vert Meer opties > Meer tools > Prestatiemonitor selecteren.
Gebruik het Prestatiemonitorpaneel
De Prestatiemonitor geeft een algemeen beeld van de runtimeprestaties van uw website.
Door te observeren hoe metrische waarden veranderen terwijl u met uw website communiceert, kunt u mogelijkheden voor verbetering aan het licht brengen.
Een nuttige functie van de Prestatiemeter is dat deze tijdens de paginanavigatie blijft bestaan. Als frontend-ontwikkelaar kunt u dus problemen zoals het mislukken van de lay-out vermijden door de Prestatiemonitor te openen, door hun website te scrollen en de DOM-knooppunten en lay-out/sec- statistieken in de gaten te houden.
Als gebruikers trage laadtijden op uw site melden, kan de Prestatiemonitor u helpen probleemgebieden te identificeren.
Een grote piek in CPU-gebruik kan bijvoorbeeld wijzen op inefficiënte code. En als een pagina een groot aantal JS-gebeurtenislisteners bevat, kan het in het algemeen nuttig zijn om uw code te refactoren en die aantallen te verminderen om geheugen vrij te maken.
Als u net begint met het analyseren van de prestaties, is het aanbevolen pad eerst het Lighthouse- paneel te gebruiken en vervolgens verder onderzoek te doen met behulp van het Prestatiepaneel of de Prestatiemonitor .