Share
När du arbetar med avancerad JavaScript-kod, som en 3D-motor, kanske du frågar dig själv vad du kan göra för att optimera och hur mycket tid du ska spendera i vissa specifika kodstycken. I denna handledning delar jag flera verktyg som ger insikt om hur din kod fungerar och visar hur du får ut det mesta av användarmärken i minnesgrafen för att analysera din prestanda.
Kan inte vänta med att se vad denna handledning handlar om? Kolla på denna videon:
Känn dig fri att pinga mig på Twitter (@deltakosh) om du vill diskutera den här artikeln!
En profiler som kommer att tänka på är den integrerade profiler som du kan hitta med nya uppdateringar för förbättringar av Internet Explorer F12 Dev Tools, som också kommer att vara tillgängliga för Microsoft Edge. Naturligtvis kan du använda alla liknande verktyg du föredrar också på din dev-box.
Om du vill prova detta på Android, iOS eller Mac OS kan du också använda remote.IE för att få en instans av Windows 10 Teknisk förhandsgranskning på några minuter. Öppna sedan Internet Explorer "e" du har undvikit (det är ett tillfälligt klientskal som har Project Spartans nya reningsmotor konfigurerad), slår på F12 och nu kan du se vad jag ska visa dig:
Observera att med de nya F12-verktygen som vi levererade med Windows 10 Teknisk förhandsvisning, är profiler nu en del av UI-responsfönstret:
Låt oss se andra alternativ som kan ge dig mer insikter om hur din kod fungerar.
Du behöver bara ringa console.time () och console.timeEnd () runt koden du vill utvärdera. Resultatet är en sträng i konsolen som visar tiden som förflutit mellan tid och timeEnd.
Det här är ganska grundläggande och kan enkelt emuleras, men jag hittade denna funktion riktigt enkelt att använda.
Ännu mer intressant kan du ange en sträng för att få en etikett för din mätning.
Det här är till exempel vad jag gjorde för Babylon.js:
Accentsconagua
console.time ("Active meshes evaluation"); this._evaluateActiveMeshes (); console.timeEnd ("Active meshes evaluation");Den här typen av kod finns kring alla viktiga funktioner och då kan du få riktigt bra information när prestanda loggning är aktiverad:
Varnas att renderingstext i konsolen kan konsumera CPU-ström.
Även om den här funktionen inte i sig är en standardfunktion, är webbläsarkompatibiliteten ganska bra. Chrome, Firefox, IE, Opera och Safari stöder det.
Om du vill ha något mer visuellt kan du också använda prestationsobjektet. Bland andra intressanta funktioner som hjälper dig att mäta en webbsidans prestanda kan du hitta en funktion som heter markera som kan avge ett användarmärke.
Ett användarnamn är associeringen av ett namn med ett tidsvärde. Du kan mäta delar av kod med detta API för att få exakta värden. Du kan också hitta en bra artikel om detta API av Aurelio de Rosa på SitePoint.
Tanken idag är att använda detta API för att visualisera specifika användarmärken på skärmen UI Responsiveness:
Med det här verktyget kan du fånga en session och analysera hur CPU används:
Vi kan sedan zooma in på en viss ram genom att välja en post som heter Återuppringning av animationsram och högerklicka på den för att välja filtrera till händelse.
Den valda ramen filtreras sedan:
Tack vare det nya verktyget F12 kan du sedan byta till JavaScript-samtalstackar för att få mer information om vad som hände under denna händelse:
Det största problemet här är att det inte är lätt att få hur koden skickas under evenemanget.
Och det är här där användarmärken går in i spelet. Vi kan lägga till våra egna markörer och sedan kunna sönderdela en ram och se vilken funktion som är dyrare och så vidare.
performance.mark ("Börja på något ... just nu!");Dessutom, när du skapar din egen ram, är det mycket praktiskt att kunna instrumentet din kod med mätningar:
performance.mark ("Active meshes evaluation-Begin"); this._evaluateActiveMeshes (); performance.mark ("Active meshes evaluation-End"); performance.measure ("Active meshes evaluation", "Active meshes evaluation-Begin", "Active meshes evaluation-End");Låt oss se vad du kan få med Babylon.js, till exempel med ”V8” scen:
Du kan be Babylon.js att avge användarmärken och åtgärder för dig genom att använda debug skikt:
Då kan du använda den här skärmen genom att använda analysprofilen för UI-respons:
Du kan se att användarmärken visas ovanpå händelsen själv (de orange trianglarna) samt segment för varje åtgärd:
Det är då mycket lätt att bestämma att faserna [Rendermål] och [Main render] är dyraste.
Den fullständiga koden som används av Babylon.jsatt tillåta användare att mäta prestanda för olika funktioner är följande:
Tools._StartUserMark = funktion (counterName, condition) om (typ av villkor === "undefined") villkor = true; om (! villkor ||! Tools._performance.mark) return; Tools._performance.mark (counterName + "-Begin"); ; Tools._EndUserMark = funktion (counterName, condition) om (typ av villkor === "undefined") villkor = true; om (! villkor ||! Tools._performance.mark) return; Tools._performance.mark (counterName + "-End"); Tools._performance.measure (counterName, counterName + "-Begin", counterName + "-End"); ; Tools._StartPerformanceConsole = funktion (motnamn, villkor) om (typ av villkor === "odefinierad") villkor = true; om (! villkor) return; Verktyg._StartUserMark (motnamn, villkor); om (console.time) console.time (counterName); ; Tools._EndPerformanceConsole = funktion (counterName, condition) om (typ av villkor === "odefinierad") villkor = true; om (! villkor) return; Verktyg._EndUserMark (motnamn, villkor); om (console.time) console.timeEnd (counterName); ;
Tack vare F12-verktyg och användarmärken kan du nu få en bra instrumentpanel om hur olika delar av din kod fungerar tillsammans.
Det kan kanske överraska dig lite, men Microsoft har en massa gratis lärande på många JavaScript-ämnen med öppen källkod, och vi har ett uppdrag att skapa mycket mer med Microsoft Edge. Kolla in min egen:
Eller vårt lags inlärningsserie:
Och några gratis verktyg: Visual Studio Community, Azure Trial och testverktyg för webbläsare för Mac, Linux eller Windows.
Den här artikeln är en del av web dev-tekniken från Microsoft. Vi är glada att dela Microsoft Edge och den nya EdgeHTML-återgivningsmotor med dig. Få gratis virtuella maskiner eller testa fjärran på din Mac, iOS, Android eller Windows-enheten @ http://dev.modern.ie/.
