Het DevTools Timeline-paneel is altijd de beste eerste stop geweest op weg naar prestatie-optimalisatie. Met dit gecentraliseerde overzicht van de activiteit van uw app kunt u analyseren waar de tijd wordt besteed aan laden, scripten, renderen en schilderen. Onlangs hebben we de tijdlijn geüpgraded met meer instrumenten, zodat u een diepgaander beeld krijgt van de prestaties van uw app.
We hebben de volgende functies toegevoegd:
- geïntegreerde JavaScript-profiler . (Vlammenkaart inbegrepen!)
- frameviewer waarmee u samengestelde lagen kunt visualiseren.
- paint profiler voor gedetailleerd inzicht in de schilderactiviteit van de browser.
Houd er rekening mee dat het gebruik van de Paint- opnameopties die in dit artikel worden beschreven enige prestatieoverhead met zich meebrengt, dus schakel ze alleen in als u dat wilt.
Geïntegreerde JavaScript-profiler
Als u ooit in het paneel Profielen heeft rondgekeken, bent u waarschijnlijk bekend met de JavaScript CPU-profiler . Deze tool meet waar de uitvoeringstijd wordt besteed in uw JavaScript-functies. Door JavaScript-profielen te bekijken met de Flame Chart, kunt u uw JavaScript-verwerking in de loop van de tijd visualiseren.
Nu kunt u een gedetailleerd overzicht van uw JavaScript-uitvoering krijgen in het tijdlijnpaneel . Door de JS Profiler- opnameoptie te selecteren, kunt u uw JavaScript-aanroepstapels in de tijdlijn zien, samen met andere browsergebeurtenissen. Door deze functie aan de tijdlijn toe te voegen, kunt u uw foutopsporingsworkflow stroomlijnen. Maar meer dan dat: u kunt uw JavaScript in context bekijken en de delen van uw code identificeren die de laadtijd en weergave van de pagina beïnvloeden.
Naast de JavaScript-profiler hebben we ook een Flame Chart-weergave geïntegreerd in het tijdlijnpaneel . U kunt nu de activiteit van uw app bekijken als de klassieke waterval van gebeurtenissen of als een vlammendiagram. Met het Vlamdiagram-pictogram kunt u tussen deze twee weergaven schakelen.
Frame-viewer
De kunst van het samenstellen van lagen is een ander aspect van de browser dat grotendeels verborgen is gebleven voor ontwikkelaars. Bij spaarzaam en zorgvuldig gebruik kunnen lagen dure herschilderingen helpen voorkomen en enorme prestatieverbeteringen opleveren. Maar het is vaak niet duidelijk om te voorspellen hoe de browser uw inhoud zal samenstellen. Met de nieuwe Paint- opnameoptie van Timeline kunt u samengestelde lagen visualiseren bij elk frame van een opname.
Wanneer u een grijze kaderbalk boven de Hoofdthread selecteert, biedt het paneel Lagen een visueel model van de lagen waaruit uw app bestaat.
U kunt op het lagenmodel zoomen, roteren en slepen om de inhoud ervan te verkennen. Als u over een laag beweegt, wordt de huidige positie op de pagina zichtbaar. Door met de rechtermuisknop op een laag te klikken, kunt u naar het overeenkomstige knooppunt in het paneel Elementen springen. Deze functies laten zien wat er naar een laag is gepromoveerd. Als u een laag selecteert, kunt u ook zien waarom deze is gepromoveerd in de rij met de naam Compositing Reasons .
Verfprofiler
Als laatste, maar daarom niet minder belangrijk, hebben we de verfprofiler toegevoegd, waarmee u scheurtjes kunt identificeren die door dure verf worden veroorzaakt. Deze functie verrijkt de tijdlijn met meer details over het werk dat Chrome doet tijdens verfevenementen.
Om te beginnen is het nu eenvoudiger om de visuele inhoud te identificeren die overeenkomt met elke verfgebeurtenis. Wanneer u een groene verfgebeurtenis in de tijdlijn selecteert, ziet u in het detailvenster een voorbeeld van de werkelijke pixels die zijn geverfd.
Als je er echt in wilt duiken, schakel dan over naar het Paint Profiler- paneel. Deze profiler toont u de exacte tekenopdrachten die de browser voor de geselecteerde verf heeft uitgevoerd. Om u te helpen deze native opdrachten te verbinden met daadwerkelijke inhoud in uw app, kunt u met de rechtermuisknop op een draw* -aanroep klikken en rechtstreeks naar het overeenkomstige knooppunt in het Elementen- paneel gaan.
Met de mini-tijdlijn bovenaan het venster kunt u het tekenproces afspelen en een idee krijgen van welke bewerkingen duur zijn voor de browser om uit te voeren. Tekenbewerkingen zijn als volgt kleurgecodeerd: roze (vormen), blauw (bitmap), groen (tekst) en paars (diversen). De hoogte van de balk geeft de gespreksduur aan, dus als u hoge balken onderzoekt, kunt u beter begrijpen wat een bepaalde verf kostbaar was.
Profiel en winst!
Als het gaat om prestatie-optimalisatie, kan kennis van de browser ongelooflijk krachtig zijn. Door u een kijkje onder de motorkap te geven, helpen deze tijdlijnupdates de relatie tussen uw code en de weergaveprocessen van Chrome te verduidelijken. Probeer deze nieuwe opties in de tijdlijn uit en kijk wat Chrome DevTools kan doen om uw workflow voor het zoeken naar jank te verbeteren!