Share
Når du arbeider med avansert JavaScript-kode, som en 3D-motor, kan du spørre deg selv hva du kan gjøre for å optimalisere, og hvor mye tid du bør bruke i enkelte bestemte kodestykker. I denne veiledningen deler jeg flere verktøy som gir innsikt i hvordan koden din utfører, og viser deg hvordan du får mest mulig ut av brukermerkene i minnesgrafen for å analysere ytelsen din.
Kan ikke vente å se hva denne opplæringen handler om? Se denne videoen:
Ta gjerne på meg på Twitter (@deltakosh) hvis du vil diskutere denne artikkelen!
En profiler som kommer til å tenke på er den integrerte profilen du kan finne ved hjelp av nye oppdateringer til forbedringene for Internet Explorer F12 Dev Tools, som også vil være tilgjengelige for Microsoft Edge. Selvfølgelig kan du bruke alle lignende verktøy du foretrekker også på dev-boksen din.
Hvis du vil prøve dette ut på Android, iOS eller Mac OS, kan du også bruke remote.IE for å få en forekomst av Windows 10 Teknisk forhåndsvisning i løpet av minutter. Åpne deretter Internet Explorer "e" du har unngått (det er et midlertidig klient skall som har Project Spartans nye rendering motor konfigurert), treffer F12 og nå kan du se hva jeg skal vise deg:
Vær oppmerksom på at med de nye F12-verktøyene som vi sendte med Windows 10 Teknisk forhåndsvisning, er profiler nå en del av UI-responsivitetsvinduet:
La oss se andre alternativer som kan gi deg mer innblikk i hvordan koden din utfører.
Du må bare ringe console.time () og console.timeEnd () rundt koden du vil evaluere. Resultatet er en streng i konsollen som viser tiden som er gått mellom tid og timeEnd.
Dette er ganske grunnleggende og kan lett emuleres, men jeg fant denne funksjonen veldig enkel å bruke.
Enda mer interessant, du kan spesifisere en streng for å få en etikett for målingen din.
Dette er for eksempel det jeg gjorde for Babylon.js:
Accentsconagua
console.time ("Active meshes evaluation"); this._evaluateActiveMeshes (); console.timeEnd ("Active meshes evaluation");Denne typen kode kan bli funnet rundt alle de viktigste funksjonene, og når ytelseslogging er aktivert, kan du få veldig bra informasjon:
Vær advart om at renderingstekst i konsollen kan forbruke CPU-strøm.
Selv om denne funksjonen ikke er en standardfunksjon, er nettleserkompatibiliteten ganske bra. Chrome, Firefox, IE, Opera og Safari støtter det.
Hvis du vil ha noe mer visuelt, kan du også bruke resultatobjektet. Blant andre interessante funksjoner som kan hjelpe deg med å måle en nettsideytelse, kan du finne en funksjon som heter merke som kan sende ut et brukermerke.
Et brukermerke er tilknytningen til et navn med en tidsverdi. Du kan måle deler av kode med denne API-en for å få presise verdier. Du kan også finne en god artikkel om denne API-en av Aurelio de Rosa på SitePoint.
Tanken i dag er å bruke denne API for å visualisere spesifikke brukermerker på skjermbildet UI Responsiveness:
Dette verktøyet lar deg fange en økt og analysere hvordan CPUen brukes:
Vi kan da zoome inn på en bestemt ramme ved å velge en oppføring som heter Animasjonsramme tilbakeringing og høyreklikk på den for å velge filtrere til hendelsen.
Den valgte rammen blir filtrert da:
Takket være det nye verktøyet F12 kan du da bytte til JavaScript-ringestabler for å få mer informasjon om hva som skjedde under denne hendelsen:
Hovedproblemet her er at det ikke er lett å få frem hvordan koden blir sendt under hendelsen.
Og dette er hvor brukermerker går inn i spillet. Vi kan legge til vår egen markører og deretter kunne dekomponere en ramme og se hvilken funksjon er dyrere og så videre.
performance.mark ("Begynn av noe ... akkurat nå!");Videre, når du lager ditt eget rammeverk, er det superhendig å kunne instrumentet din kode med målinger:
performance.mark ("Active meshes evaluation-Begin"); this._evaluateActiveMeshes (); performance.mark ("Active meshes evaluation-End"); performance.measure ("Active meshes evaluering", "Active meshes evaluering-Begynn", "Active meshes evaluation-End");La oss se hva du kan få med Babylon.js, for eksempel med “V8” scene:
Du kan spørre Babylon.js å sende brukermerke og tiltak for deg ved å bruke Debug lag:
Deretter kan du få denne skjermen ved å bruke UI-responsanalysatoren:
Du kan se at brukermerker vises øverst på selve arrangementet (de oransje trekanter), samt segmenter for hvert mål:
Det er da veldig enkelt å fastslå at faser for [Render mål] og [Main render] er de dyreste.
Den komplette koden som brukes av Babylon.jsFor å tillate brukere å måle ytelsen til ulike funksjoner er følgende:
Tools._StartUserMark = funksjon (counterName, tilstand) if (type of condition === "undefined") betingelse = true; hvis (! tilstand ||! Tools._performance.mark) return; Tools._performance.mark (counterName + "-Begin"); ; Tools._EndUserMark = funksjon (counterName, tilstand) if (type of condition === "undefined") betingelse = true; hvis (! tilstand ||! Tools._performance.mark) return; Tools._performance.mark (counterName + "-End"); Tools._performance.measure (counterName, counterName + "-Begin", counterName + "-End"); ; Tools._StartPerformanceConsole = funksjon (counterName, tilstand) if (type of condition === "undefined") betingelse = true; hvis (! tilstand) return; Tools._StartUserMark (counterName, condition); hvis (console.time) console.time (counterName); ; Tools._EndPerformanceConsole = funksjon (counterName, tilstand) if (type of condition === "undefined") betingelse = true; hvis (! tilstand) return; Tools._EndUserMark (counterName, condition); hvis (console.time) console.timeEnd (counterName); ;
Takket være F12 verktøy og brukermerker, kan du nå få et flott dashbord om hvordan ulike deler av koden din fungerer sammen.
Det kan kanskje overraske deg litt, men Microsoft har en mengde gratis læring på mange open source JavaScript-emner, og vi er på oppdrag for å skape mye mer med Microsoft Edge. Sjekk ut min egen:
Eller vårt lags læringsserie:
Og noen gratis verktøy: Visual Studio Community, Azure Trial, og tverrbrowser testing verktøy for Mac, Linux eller Windows.
Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ http://dev.modern.ie/.
