Analyseer runtimeprestaties

Kayce Basques

Opmerking: Zie Websitesnelheid optimaliseren voor meer informatie over hoe u uw pagina's sneller kunt laden.

Runtimeprestaties zijn hoe uw pagina presteert wanneer deze actief is, en niet wanneer deze wordt geladen. In deze zelfstudie leert u hoe u het prestatiepaneel van Chrome DevTools gebruikt om de runtimeprestaties te analyseren. In termen van het RAIL- model zijn de vaardigheden die u in deze zelfstudie leert nuttig voor het analyseren van de respons-, animatie- en inactieve fasen van uw pagina.

Let op: deze tutorial is gebaseerd op Chrome 59. Als u een andere versie van Chrome gebruikt, kunnen de gebruikersinterface en functies van DevTools afwijken. Controleer chrome://help om te zien welke versie van Chrome u gebruikt.

Begin

In deze zelfstudie opent u DevTools op een livepagina en gebruikt u het prestatiepaneel om een ​​prestatieknelpunt op de pagina te vinden.

1. Open Google Chrome in de incognitomodus . De incognitomodus zorgt ervoor dat Chrome schoon werkt. Als u bijvoorbeeld veel extensies heeft geïnstalleerd, kunnen die extensies ruis veroorzaken in uw prestatiemetingen.

2. Laad de volgende pagina in uw incognitovenster. Dit is de demo die u gaat profileren. Op de pagina ziet u een aantal kleine blauwe vierkantjes die op en neer bewegen.

   https://googlechrome.github.io/devtools-samples/jank/

3. Druk op Command+Option+I (Mac) of Control+Shift+I (Windows, Linux) om DevTools te openen.

   

   Figuur 1 . De demo aan de linkerkant en DevTools aan de rechterkant

   Opmerking : voor de rest van de schermafbeeldingen wordt DevTools losgekoppeld van een apart venster, zodat u de inhoud ervan beter kunt zien.

Simuleer een mobiele CPU

Mobiele apparaten hebben veel minder CPU-kracht dan desktops en laptops. Wanneer u een pagina profileert, kunt u CPU-throttling gebruiken om te simuleren hoe uw pagina presteert op mobiele apparaten.

1. Klik in DevTools op het tabblad Prestaties .
2. Zorg ervoor dat het selectievakje Schermafbeeldingen is ingeschakeld.
3. Klik op Vastleginstellingen . DevTools onthult instellingen die verband houden met de manier waarop prestatiestatistieken worden vastgelegd.

4. Voor CPU selecteert u 2x vertraging . DevTools beperkt uw CPU zodat deze 2 keer langzamer is dan normaal.

   

   Figuur 2 . CPU-throttling, blauw omlijnd

   Opmerking : als u er bij het testen van andere pagina's zeker van wilt zijn dat ze goed werken op goedkope mobiele apparaten, stelt u CPU Throttling in op 20x vertraging . Deze demo werkt niet goed met 20x vertraging, dus gebruikt hij alleen 2x vertraging voor instructiedoeleinden.

Zet de demo op

Het is moeilijk om een ​​runtime prestatiedemo te maken die consistent werkt voor alle lezers van deze website. In deze sectie kunt u de demo aanpassen om ervoor te zorgen dat uw ervaring relatief consistent is met de schermafbeeldingen en beschrijvingen die u in deze zelfstudie ziet, ongeacht uw specifieke configuratie.

1. Blijf op 10 toevoegen klikken totdat de blauwe vierkantjes merkbaar langzamer bewegen dan voorheen. Op een geavanceerde machine kan dit ongeveer 20 klikken duren.

2. Klik op Optimaliseren . De blauwe vierkanten moeten sneller en soepeler bewegen.

   Opmerking : als u geen merkbaar verschil ziet tussen de geoptimaliseerde en niet-geoptimaliseerde versies, klik dan een paar keer op Aftrekken 10 en probeer het opnieuw. Als je te veel blauwe vierkantjes toevoegt, haal je gewoon het maximale uit de CPU en zul je geen groot verschil zien in de resultaten voor de twee versies.

3. Klik op Optimaliseren ongedaan maken . De blauwe vierkanten bewegen langzamer en weer met meer ruk.

Registreer runtime-prestaties

Wanneer u de geoptimaliseerde versie van de pagina hebt uitgevoerd, bewegen de blauwe vierkanten sneller. Waarom is dat? Beide versies zouden elk vierkant dezelfde hoeveelheid ruimte in dezelfde tijd moeten verplaatsen. Maak een opname in het deelvenster Prestaties om te leren hoe u het prestatieknelpunt in de niet-geoptimaliseerde versie kunt detecteren.

1. Klik in DevTools op Opnemen . DevTools legt prestatiestatistieken vast terwijl de pagina wordt uitgevoerd.

   

   Figuur 3 : Profilering van de pagina

2. Wacht een paar seconden.

3. Klik op Stoppen . DevTools stopt met opnemen, verwerkt de gegevens en geeft vervolgens de resultaten weer in het paneel Prestaties.

   

   Figuur 4 : De resultaten van het profiel

Wauw, dat is een overweldigende hoeveelheid gegevens. Maak je geen zorgen, het zal binnenkort allemaal logischer worden.

Analyseer de resultaten

Zodra u een opname heeft van de prestaties van de pagina, kunt u meten hoe slecht de prestaties van de pagina zijn en de oorzaak(en) achterhalen.

Analyseer frames per seconde

De belangrijkste maatstaf voor het meten van de prestaties van elke animatie zijn frames per seconde (FPS). Gebruikers zijn blij als animaties op 60 FPS draaien.

1. Kijk naar het FPS- diagram. Wanneer u een rode balk boven FPS ziet, betekent dit dat de framerate zo laag is gedaald dat dit waarschijnlijk de gebruikerservaring schaadt. Over het algemeen geldt: hoe hoger de groene balk, hoe hoger de FPS.

   

   Figuur 5 : Het FPS-diagram, blauw omlijnd

2. Onder het FPS- diagram ziet u het CPU- diagram. De kleuren in het CPU- diagram komen overeen met de kleuren op het tabblad Samenvatting onder aan het paneel Prestaties. Het feit dat de CPU- grafiek vol kleur is, betekent dat de CPU tijdens de opname maximaal is benut. Telkens wanneer u ziet dat de CPU gedurende langere perioden maximaal wordt gebruikt, is dit een signaal om manieren te vinden om minder werk te doen.

   

   Figuur 6 : Het CPU-diagram en het tabblad Samenvatting, blauw omlijnd

3. Beweeg uw muis over de FPS- , CPU- of NET- grafieken. DevTools toont een screenshot van de pagina op dat moment. Beweeg uw muis naar links en rechts om de opname opnieuw af te spelen. Dit wordt scrubbing genoemd en is handig voor het handmatig analyseren van de voortgang van animaties.

   

   Figuur 7 : Een screenshot bekijken van de pagina rond de 2000 ms-markering van de opname

4. Beweeg in het gedeelte Frames uw muis over een van de groene vierkanten. DevTools toont u de FPS voor dat specifieke frame. Elk frame ligt waarschijnlijk ruim onder het doel van 60 FPS.

   

   Figuur 8 : Zweven over een frame

Bij deze demo is het natuurlijk vrij duidelijk dat de pagina niet goed presteert. Maar in echte scenario's is het misschien niet zo duidelijk, dus het is handig om al deze tools te hebben om metingen uit te voeren.

Bonus: open de FPS-meter

Een ander handig hulpmiddel is de FPS-meter, die realtime schattingen geeft van de FPS terwijl de pagina wordt uitgevoerd.

1. Druk op Command+Shift+P (Mac) of Control+Shift+P (Windows, Linux) om het Commandomenu te openen.
2. Begin met het typen van Rendering in het Commandomenu en selecteer Rendering weergeven .

3. Schakel op het tabblad Rendering FPS-meter in. Er verschijnt een nieuwe overlay in de rechterbovenhoek van uw viewport.

   

   Figuur 9 : De FPS-meter

4. Schakel de FPS-meter uit en druk op Escape om het tabblad Rendering te sluiten. Je zult het niet gebruiken in deze zelfstudie.

Zoek het knelpunt

Nu je hebt gemeten en geverifieerd dat de animatie niet goed presteert, is de volgende vraag die je moet beantwoorden: waarom?

1. Let op het tabblad Samenvatting. Als er geen evenementen zijn geselecteerd, toont dit tabblad een overzicht van de activiteiten. De pagina besteedde het grootste deel van de tijd aan weergave. Omdat prestatie de kunst is om minder werk te doen, is het uw doel om de hoeveelheid tijd die u aan renderingwerk besteedt, te verminderen.

   

   Figuur 10 : Het tabblad Samenvatting, blauw omlijnd

2. Vouw de sectie Hoofd uit. DevTools toont u een vlamdiagram van de activiteit op de hoofdlijn, in de loop van de tijd. De x-as vertegenwoordigt de opname in de loop van de tijd. Elke balk vertegenwoordigt een gebeurtenis. Een bredere balk betekent dat het evenement langer duurde. De y-as vertegenwoordigt de call-stack. Als je gebeurtenissen op elkaar gestapeld ziet, betekent dit dat de hogere gebeurtenissen de lagere gebeurtenissen veroorzaakten.

   

   Figuur 11 : Het hoofdgedeelte, blauw omlijnd

3. Er staan ​​veel gegevens in de opname. Zoom in op een enkele Animation Frame Fired- gebeurtenis door te klikken, vast te houden en met de muis over het overzicht te slepen. Dit is de sectie met de FPS- , CPU- en NET- grafieken. Op de tabbladen Hoofdsectie en Samenvatting wordt alleen informatie weergegeven voor het geselecteerde gedeelte van de opname.

   

   Figuur 12 : Ingezoomd op een enkele Animation Frame Fired-gebeurtenis

   Opmerking : een andere manier om in te zoomen is door de hoofdsectie scherp te stellen door op de achtergrond te klikken of een gebeurtenis te selecteren en vervolgens op de toetsen W, A, S en D te drukken.

4. Let op de rode driehoek in de rechterbovenhoek van de Animation Frame Fired- gebeurtenis. Wanneer u een rode driehoek ziet, is dit een waarschuwing dat er mogelijk een probleem is met deze gebeurtenis.

   Opmerking : de gebeurtenis Animation Frame Fired vindt plaats telkens wanneer een callback requestAnimationFrame() wordt uitgevoerd.

5. Klik op de gebeurtenis Animation Frame Fired . Op het tabblad Samenvatting wordt nu informatie over die gebeurtenis weergegeven. Let op de onthullingslink . Als u hierop klikt, markeert DevTools de gebeurtenis die de Animation Frame Fired -gebeurtenis heeft geïnitieerd. Let ook op de link app.js:94 . Als u hierop klikt, springt u naar de relevante regel in de broncode.

   

   Figuur 13 : Meer informatie over de Animation Frame Fired-gebeurtenis

   Opmerking : Nadat u een gebeurtenis hebt geselecteerd, gebruikt u de pijltoetsen om de gebeurtenissen ernaast te selecteren.

6. Onder het app.update- evenement bevinden zich een aantal paarse evenementen. Als ze breder waren, lijkt het alsof er op elk ervan een rode driehoek staat. Klik nu op een van de paarse Layout- gebeurtenissen. DevTools biedt meer informatie over de gebeurtenis op het tabblad Samenvatting . Er is inderdaad een waarschuwing over gedwongen terugvloeiingen (een ander woord voor lay-out).

7. Klik op het tabblad Samenvatting op de link app.js:70 onder Layout Forced . DevTools brengt u naar de coderegel die de lay-out heeft geforceerd.

   

   Figuur 13 : De coderegel die de geforceerde lay-out veroorzaakte

   Opmerking : het probleem met deze code is dat in elk animatieframe de stijl voor elk vierkant wordt gewijzigd en vervolgens de positie van elk vierkant op de pagina wordt opgevraagd. Omdat de stijlen zijn veranderd, weet de browser niet of de positie van elk vierkant is veranderd, dus moet hij het vierkant opnieuw indelen om de positie ervan te berekenen. Zie Geforceerde synchrone lay-outs vermijden voor meer informatie.

Opluchting! Dat was veel om in te verwerken, maar je hebt nu een solide basis in de basisworkflow voor het analyseren van runtimeprestaties. Goed gedaan.

Bonus: analyseer de geoptimaliseerde versie

Gebruik de workflows en tools die u zojuist hebt geleerd en klik op Optimaliseren in de demo om de geoptimaliseerde code in te schakelen, maak nog een prestatieregistratie en analyseer vervolgens de resultaten. Van de verbeterde framerate tot de vermindering van gebeurtenissen in de vlammengrafiek van het hoofdgedeelte , je kunt zien dat de geoptimaliseerde versie van de app veel minder werk doet, wat resulteert in betere prestaties.

Opmerking: zelfs deze geoptimaliseerde versie is niet zo geweldig, omdat deze nog steeds de top eigenschap van elk vierkant manipuleert. Een betere aanpak is om vast te houden aan eigenschappen die alleen van invloed zijn op de compositie. Zie Transformatie- en dekkingswijzigingen gebruiken voor animaties voor meer informatie.

Volgende stappen

De basis voor het begrijpen van prestaties is het RAIL-model. Dit model leert u welke prestatiestatistieken het belangrijkst zijn voor uw gebruikers. Zie Prestaties meten met het RAIL-model voor meer informatie.

Om meer vertrouwd te raken met het Performance-paneel: oefening baart kunst. Probeer uw eigen pagina's te profileren en de resultaten te analyseren. Als u vragen heeft over uw resultaten, opent u een Stack Overflow-vraag met de tag google-chrome-devtools . Voeg indien mogelijk schermafbeeldingen of links naar reproduceerbare pagina's toe.

Om een ​​expert te worden in runtime-prestaties, moet je leren hoe de browser HTML, CSS en JS vertaalt naar pixels op een scherm. De beste plaats om te beginnen is het Rendering Performance Overview . The Anatomy Of A Frame duikt nog dieper in.

Ten slotte zijn er veel manieren om de runtimeprestaties te verbeteren. Deze tutorial concentreerde zich op één specifiek animatieknelpunt om u een gerichte rondleiding door het prestatiepaneel te geven, maar dit is slechts een van de vele knelpunten die u tegen kunt komen. De rest van de Rendering Performance-serie bevat veel goede tips voor het verbeteren van verschillende aspecten van runtime-prestaties, zoals:

• Optimalisatie van JS-uitvoering
• Verminder de reikwijdte en complexiteit van stijlberekeningen
• Vermijd grote, complexe lay-outs en lay-outverlies
• Vereenvoudig de verfcomplexiteit en verminder verfgebieden
• Houd u aan de eigenschappen die alleen voor de componist gelden en beheer het aantal lagen
• Debounce uw invoerbehandelaars