Share
Wanneer u aan geavanceerde JavaScript-code werkt, zoals een 3D-engine, vraagt u zich misschien af wat u kunt doen om te optimaliseren en hoeveel tijd u in sommige specifieke stukjes code moet doorbrengen. In deze zelfstudie deel ik verschillende hulpmiddelen die inzicht bieden in hoe uw code presteert en hoe u de meeste gebruikerstekens in de geheugengrafiek kunt benutten om uw prestaties te analyseren.
Kan niet wachten om te zien waar deze tutorial over gaat? Bekijk deze video:
Je kunt me pingen op Twitter (@deltakosh) als u dit artikel wilt bespreken!
Een profiler die in je opkomt, is de geïntegreerde profiler die je kunt vinden met behulp van nieuwe updates voor de uitbreidingen van de Internet Explorer F12 Dev Tools - die ook beschikbaar zullen zijn voor Microsoft Edge. Natuurlijk kunt u vergelijkbare tools gebruiken die u ook prefereert in uw dev-box.
Als u dit wilt uitproberen op Android, iOS of Mac OS, kunt u ook remote.IE gebruiken om een exemplaar van de technische preview van Windows 10 binnen enkele minuten te laten uitvoeren. Open vervolgens de "e" van Internet Explorer die u hebt gemist (het is een tijdelijke clientshell waarop de nieuwe rendering-engine van Project Spartan is geconfigureerd), druk op F12 en nu kun je zien wat ik je laat zien:
Houd er rekening mee dat met de nieuwe F12-hulpprogramma's die we hebben geleverd met technische preview van Windows 10 profiler nu deel uitmaakt van het reactievak van de gebruikersinterface:
Laten we andere opties bekijken die u meer inzicht kunnen geven in hoe uw code presteert.
Je hoeft alleen maar te bellen console.time () en console.timeEnd () rondom het stuk code dat je wilt evalueren. Het resultaat is een tekenreeks in uw console met de tijd die is verstreken tussen tijd en timeEnd.
Dit is vrij eenvoudig en kan gemakkelijk worden nagebootst, maar ik vond deze functie heel eenvoudig te gebruiken.
Nog interessanter is dat u een tekenreeks kunt opgeven om een label voor uw meting te krijgen.
Dit is bijvoorbeeld wat ik deed voor Babylon.js:
Accentsconagua
console.time ("Evaluatie van actieve netten"); this._evaluateActiveMeshes (); console.timeEnd ("Evaluatie van actieve netten");Dit soort code is te vinden rond alle belangrijke functies en vervolgens, wanneer prestatielogging is ingeschakeld, kunt u echt geweldige informatie krijgen:
Wees gewaarschuwd dat het weergeven van tekst in de console CPU-kracht kan verbruiken.
Zelfs als deze functie niet per se een standaardfunctie is, is de browsercompatibiliteit behoorlijk groot. Chrome, Firefox, IE, Opera en Safari ondersteunen het.
Als u iets meer visueel wilt, kunt u ook het prestatieobject gebruiken. Naast andere interessante functies om u te helpen bij het meten van de prestaties van een webpagina, kunt u een functie vinden met de naam Mark die een gebruikersteken kan uitzenden.
Een gebruikersteken is de associatie van een naam met een tijdswaarde. U kunt delen van code meten met deze API om nauwkeurige waarden te krijgen. Je kunt ook op SitePoint een geweldig artikel over deze API van Aurelio de Rosa vinden.
Het idee van vandaag is om deze API te gebruiken om specifieke gebruikerstekens te visualiseren op het scherm UI-responsiviteit:
Met deze tool kunt u een sessie vastleggen en analyseren hoe de CPU wordt gebruikt:
We kunnen vervolgens inzoomen op een specifiek frame door een ingevoerd item te selecteren Callback voor animatieframe en klik erop met de rechtermuisknop om te selecteren filteren naar evenement.
Het geselecteerde frame wordt vervolgens gefilterd:
Dankzij de nieuwe F12-tool kunt u vervolgens overschakelen naar JavaScript-telefoonstacks voor meer informatie over wat er tijdens dit evenement is gebeurd:
Het grootste probleem hierbij is dat het niet eenvoudig is om te achterhalen hoe code tijdens het evenement wordt verzonden.
En dit is waar gebruikerstekens het spel binnengaan. We kunnen onze eigen toevoegen markers en dan in staat zijn om een frame te ontbinden en te zien welke functie het duurder is enzovoort.
performance.mark ("Begin van iets ... gewoon nu!");Verder is het super handig om je code te kunnen gebruiken als je je eigen framework maakt afmetingen:
performance.mark ("Active meshes evaluation-Begin"); this._evaluateActiveMeshes (); performance.mark ("Evaluatie van actieve netten-Einde"); performance.measure ("Evaluatie van actieve mazen", "Evaluatie van actieve mazen-Begin", "Evaluatie van actieve mazen-Einde");Laten we eens kijken wat u kunt krijgen met Babylon.js, bijvoorbeeld met de “V8” tafereel:
U kunt Babylon.js vragen om gebruikerstekens en maatregelen voor u uit te zenden met behulp van debug layer:
Vervolgens kunt u met behulp van de UI-reactiviteitsanalysator dit scherm krijgen:
U ziet dat gebruikerstekens worden weergegeven bovenop de gebeurtenis zelf (de oranje driehoeken), evenals segmenten voor elke maat:
Het is dan super eenvoudig om te bepalen dat bijvoorbeeld de [Renderdoelen] en [Hoofdweergave] -fasen het duurst zijn.
De volledige code die wordt gebruikt door Babylon.jsom gebruikers toe te staan om de prestaties van verschillende functies te meten, is het volgende:
Tools._StartUserMark = function (counterName, condition) if (typeof condition === "undefined") condition = true; if (! voorwaarde ||! Tools._performance.mark) retour; Tools._performance.mark (counterName + "-Begin"); ; Tools._EndUserMark = function (counterName, condition) if (typeof condition === "undefined") condition = true; if (! voorwaarde ||! Tools._performance.mark) retour; Tools._performance.mark (counterName + "-End"); Tools._performance.measure (counterName, counterName + "-Begin", counterName + "-End"); ; Tools._StartPerformanceConsole = function (counterName, condition) if (typeof condition === "undefined") condition = true; als (! voorwaarde) terug; Tools._StartUserMark (counterName, condition); if (console.time) console.time (counterName); ; Tools._EndPerformanceConsole = function (counterName, condition) if (typeof condition === "undefined") condition = true; als (! voorwaarde) terug; Tools._EndUserMark (counterName, condition); if (console.time) console.timeEnd (counterName); ;
Dankzij de F12-tools en gebruikerstekens kunt u nu een goed dashboard krijgen over hoe verschillende delen van uw code samenwerken.
Het zal je misschien een beetje verbazen, maar Microsoft heeft een heleboel gratis leren over veel open source JavaScript-onderwerpen, en we zijn op een missie om nog veel meer te maken met Microsoft Edge coming. Bekijk mijn eigen:
Of de leerserie van ons team:
En enkele gratis tools: Visual Studio Community, Azure Trial en cross-browser testtools voor Mac, Linux of Windows.
Dit artikel maakt deel uit van de web dev tech-serie van Microsoft. We zijn verheugd om te delen Microsoft Edge en het nieuwe EdgeHTML-renderingengine met jou. Download gratis virtuele machines of test op afstand op uw Mac, iOS, Android of Windows-apparaat @ http://dev.modern.ie/.
