Share
Wenn Sie an fortgeschrittenem JavaScript-Code wie einer 3D-Engine arbeiten, können Sie sich fragen, wie Sie die Optimierung vornehmen können und wie viel Zeit Sie für bestimmte Codeteile aufwenden müssen. In diesem Lernprogramm werde ich verschiedene Tools vorstellen, die einen Einblick in die Leistung Ihres Codes geben und Ihnen zeigen, wie Sie Benutzerkennzeichen im Arbeitsspeicher am besten nutzen können, um Ihre Leistung zu analysieren.
Ich kann es kaum erwarten zu sehen, worum es in diesem Tutorial geht. Schau dieses Video an:
Ping mich auf Twitter (@deltakosh), wenn Sie diesen Artikel besprechen möchten!
Ein Profiler, der mir in den Sinn kommt, ist der integrierte Profiler, den Sie mithilfe von neuen Updates für die Internet Explorer F12 Dev Tools-Erweiterungen finden können, die auch für Microsoft Edge verfügbar sind. Natürlich können Sie auch ähnliche Tools auf Ihrer Entwicklungsbox verwenden.
Wenn Sie dies unter Android, iOS oder Mac OS ausprobieren möchten, können Sie remote.IE auch verwenden, um eine Instanz der technischen Vorschau von Windows 10 in wenigen Minuten aufzurufen. Öffnen Sie dann den Internet Explorer "e", den Sie vermieden haben (dies ist eine temporäre Client-Shell, in der die neue Rendering-Engine von Project Spartan konfiguriert ist). Klicken Sie auf F12 und jetzt können Sie sehen, was ich Ihnen zeigen werde:
Bitte beachten Sie, dass der Profiler mit den neuen F12-Tools, die wir mit der technischen Vorschau von Windows 10 geliefert haben, nun Teil des Reaktionsfensters der Benutzeroberfläche ist:
Sehen wir uns andere Optionen an, mit denen Sie mehr über die Leistung Ihres Codes erfahren können.
Sie müssen nur anrufen console.time () und console.timeEnd () um den Code, den Sie auswerten möchten. Das Ergebnis ist eine Zeichenfolge in Ihrer Konsole, die die verstrichene Zeit anzeigt Zeit und timeEnd.
Dies ist ziemlich einfach und kann leicht emuliert werden, aber ich fand diese Funktion sehr einfach zu bedienen.
Noch interessanter ist, dass Sie eine Zeichenfolge angeben können, um eine Bezeichnung für Ihre Messung zu erhalten.
Dies ist zum Beispiel das, was ich für Babylon.js gemacht habe:
Accentsconagua
console.time ("Bewertung der aktiven Maschen"); this._evaluateActiveMeshes (); console.timeEnd ("Bewertung der aktiven Maschen");Diese Art von Code kann um alle wichtigen Funktionen herum gefunden werden. Wenn die Leistungsprotokollierung aktiviert ist, erhalten Sie wirklich großartige Informationen:
Seien Sie gewarnt, dass das Rendern von Text in die Konsole CPU-Energie verbrauchen kann.
Auch wenn diese Funktion an sich keine Standardfunktion ist, ist die Browser-Kompatibilität ziemlich groß. Chrome, Firefox, IE, Opera und Safari unterstützen dies.
Wenn Sie etwas mehr visuelles wollen, können Sie auch das Leistungsobjekt verwenden. Neben anderen interessanten Funktionen, mit denen Sie die Leistung einer Webseite messen können, finden Sie eine aufgerufene Funktion Kennzeichen das kann eine Benutzermarke abgeben.
Eine Benutzermarke ist die Zuordnung eines Namens zu einem Zeitwert. Mit dieser API können Sie Codeabschnitte messen, um genaue Werte zu erhalten. Einen guten Artikel zu dieser API von Aurelio de Rosa finden Sie auch auf SitePoint.
Die heutige Idee besteht darin, diese API zu verwenden, um bestimmte Benutzermarkierungen auf dem Bildschirm "UI Responsiveness" zu visualisieren:
Mit diesem Tool können Sie eine Sitzung erfassen und analysieren, wie die CPU verwendet wird:
Wir können dann einen bestimmten Rahmen vergrößern, indem Sie einen aufgerufenen Eintrag auswählen Callback des Animationsrahmens und klicken Sie mit der rechten Maustaste darauf, um auszuwählen nach Ereignis filtern.
Das ausgewählte Bild wird dann gefiltert:
Dank des neuen F12-Tools können Sie dann zu JavaScript-Anrufstapeln wechseln, um weitere Informationen zu den Ereignissen dieses Ereignisses zu erhalten:
Das Hauptproblem dabei ist, dass es nicht leicht ist, zu erfahren, wie der Code während der Veranstaltung verteilt wird.
Und hier treten Benutzermarkierungen in das Spiel ein. Wir können unsere eigenen hinzufügen Marker und dann in der Lage sein, einen Frame zu zerlegen und zu sehen, welches Feature das teurere ist und so weiter.
performance.mark ("Beginnen Sie etwas ... gerade jetzt!");Wenn Sie Ihr eigenes Framework erstellen, ist es außerdem sehr praktisch, Ihren Code mit instrumentieren zu können Messungen:
performance.mark ("Bewertung der aktiven Netze - Beginnen"); this._evaluateActiveMeshes (); performance.mark ("Active meshes evaluation-End"); Leistungsmessung ("Bewertung der aktiven Maschen", "Begutachtung der aktiven Maschen", "Bewertung der aktiven Maschen - Ende");Mal sehen, was Sie mit Babylon.js zum Beispiel mit der "V8" Szene:
Sie können Babylon.js bitten, Benutzerkennzeichen und Kennzahlen für Sie auszugeben, indem Sie verwenden Debug-Ebene:
Anschließend können Sie mithilfe des UI-Reaktionsfähigkeitsanalysators diesen Bildschirm anzeigen:
Sie können sehen, dass Benutzerkennzeichen über dem Ereignis selbst (die orangefarbenen Dreiecke) sowie Segmente für jeden Takt angezeigt werden:
Es ist dann sehr einfach zu bestimmen, dass beispielsweise die Phasen [Renderziele] und [Main render] die teuersten sind.
Der vollständige Code, der von Babylon.js verwendet wirdDamit Benutzer die Leistung verschiedener Funktionen messen können, müssen Sie Folgendes beachten:
Tools._StartUserMark = Funktion (ZählerName, Bedingung) if (Typ der Bedingung === "undefined") Bedingung = wahr; if (! condition ||! Tools._performance.mark) return; Tools._performance.mark (counterName + "-Begin"); ; Tools._EndUserMark = Funktion (ZählerName, Bedingung) if (Typ der Bedingung === "undefined") Bedingung = wahr; if (! condition ||! Tools._performance.mark) return; Tools._performance.mark (counterName + "-End"); Tools._performance.measure (counterName, counterName + "-Begin", counterName + "-End"); ; Tools._StartPerformanceConsole = Funktion (ZählerName, Bedingung) if (Typ der Bedingung === "undefined") Bedingung = wahr; if (! Bedingung) Rückkehr; Tools._StartUserMark (counterName, Bedingung); if (console.time) console.time (counterName); ; Tools._EndPerformanceConsole = Funktion (ZählerName, Bedingung) if (Typ der Bedingung === "undefined") Bedingung = wahr; if (! Bedingung) Rückkehr; Tools._EndUserMark (counterName, Bedingung); if (console.time) console.timeEnd (counterName); ;
Dank der F12-Tools und Benutzermarkierungen können Sie jetzt ein tolles Dashboard darüber erhalten, wie verschiedene Teile Ihres Codes zusammenarbeiten.
Es mag Sie ein wenig überraschen, aber Microsoft bietet eine Reihe von kostenlosen Informationen zu vielen Open-Source-JavaScript-Themen. Wir haben uns zum Ziel gesetzt, mit Microsoft Edge viel mehr zu schaffen. Schauen Sie sich meine eigenen an:
Oder die Lernreihe unseres Teams:
Und einige kostenlose Tools: Visual Studio Community, Azure Trial und Cross-Browser-Testtools für Mac, Linux oder Windows.
Dieser Artikel ist Teil der Web-Dev-Tech-Serie von Microsoft. Wir freuen uns zu teilen Microsoft Edge und das Neue EdgeHTML-Rendering-Engine mit dir. Erhalten Sie kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac, iOS, Android oder Windows-Gerät. http://dev.modern.ie/.
