Javascript Performance testen

[T-Rex]

Moin,

ich würde gerne die Performance meines Javascript Codes sehen bzw. messen.

Ich hab da aktuell auch ein akutes Anwendungsproblem:

Da ist ein HTML, CSS, JS Spiel. Während des Spielens kann es sein, dass viele kleine Objekte mittels FadeIn und FadeOut "blinken". Um genau zu sein sind es Zellen in einem Raster. Bei dem Beispiel blinken 16 Reihen mit jeweils 10 Zellen, also 160 Zellen. Im Moment lasse ich jede Zelle blinken. Ergo hat jede Zelle ein FadeIn FadeOut. Das wären demnach 160 FadeIn / FadeOuts die gleichzeitig laufen. Man hat mir gesagt, dass die Fades auf Handys nicht zu sehen sind. Die sind anscheinend so überlastet, dass man nur sichtbar oder unsichtbar sieht - ohne Fade.

Lösung ist klar ... ich werde nicht mehr jede Zelle animieren, sondern die komplette Zeile. Aber darum geht es mir bei dieser Frage gar nicht.

Ich würde gerne messen können welches beider Methoden effizienter ist. Suche ich im Internet nach Performance Messung für Javascript stoße ich nur auf Timer. Ich glaube aber nicht, dass ich mit einem Timer in diesem Fall die Performance messen kann.

Ich hab schon den Perfromance Tab im Chrome Inspektor gefunden. Damit komme ich aber nicht wirklich zurecht. Ich weiß nicht was mir der genau anzeigt. Hab schon versucht ein wenig damit zu spielen und hab mir Beispielseiten erstellt um das Ding mal ein wenig zu reizen. Aber ich verstehe es einfach nicht :(.

Habt ihr vielleicht eine gute Idee die Performance zu messen?

Gruß Effizienter T-Rex

[Rolf B]

Hallo T-Rex,

der Performance-Tab in den Entwickler-Tools zeigt Dir auf einer Zeitleiste, zu welchem Zeitpunkt dein Code in welcher Funktion war, und wie er dahin gekommen ist. Über die Länge der Balken siehst Du, wie lange er in der Funktion war.

Aber für 160 Zellen solltest Du keine manuelle Animation durchführen. Vielleicht helfen Dir CSS Transitionen - hier mal ein Beispiel. Es baut auf table auf, weil ich es schnell zusammengeklopft habe. Für andere gitterbildende Strukturen in HTML ist es sicher auch brauchbar.

Wenn Du spalten Animieren willst, wird es etwas schwieriger. In einer Table kannst Du meines Wissens über das col Element Spalten mit Klassen belegen; in wie weit das in anderen Strukturen möglich ist, wissen andere vermutlich besser als ich.

Rolf

[T-Rex]

Also ich bin schon in einem anderen Forum soweit gekommen, dass anscheinend die fps wichtig sein sollen. Alles unter 30 fps ist schlecht. Alles über 60fps ist super hammer mega geil.

Wie der Code zu seinem Zustand gekommen ist, ist für mich auch eher Sekundär. Was der Browser genau macht ist mir relativ egal, Hauptsache er macht es schnell und somit flüssig.

Sind die fps, DIE Maßeinheit, die mir sagt ob eine Animation flüssig / performant ist?

Gruß 60ps schnell tippender T-Rex

[Matthias Apsel]

Hallo T-Rex,

Also ich bin schon in einem anderen Forum soweit gekommen,

Nett wäre es, den Thread zu zeigen, damit die Ergebnisse gebündelt werden können.

Bis demnächst
Matthias

[T-Rex]

Anderes Forum = Andere Webseite. Gutefrage um genau zu sein und bei uns im internen Firmenchat.

Gruß informierender T-Rex

[Rolf B]

Hallo T-Rex,

Was der Browser genau macht ist mir relativ egal, Hauptsache er macht es schnell und somit flüssig.

Schlechter Ansatz. Damit Du effizient programmierst und gute FPS erreichst, musst Du wissen, was der Browser tut. Viele Wege führen nach Rom. Manche sind Autobahnen, andere Eselspfade.

Sind die fps, DIE Maßeinheit, die mir sagt ob eine Animation flüssig / performant ist?

Ja. Chrome zeigt Dir auf dem Performance-Tab eine FPS Zeile an. Das ist alles ziemlich winzig, aber wenn sie voll ist, wird die volle FPS Zahl erreicht. Ob FPS=60 gut ist oder nicht hängt von deinem Bildschirm ab. Zeigt der 80 Bilder/Sekunde, sind 60 FPS Käse. 60 Bilder/Sekunde sind auf heutigen LCD-Monitoren aber Standard.

In der Performance-Leiste siehst Du, inwieweit die Javascript-Aktivitäten, die für die Animation nötig sind, länger dauern als ein Frame (weil Chrome das Frame-Timing mit anzeigt).

jQuery macht das relativ fix, ist aber deutlich abhängig von der Menge zu animierender Objekte, soweit konnte ich das bereits feststellen.

Wenn ich mit diesem Fiddle die Performance messe (120 Spans, Animation mit jQuery fadeIn/fadeOut), misst der Browser eine Script-Laufzeit von 546ms und ebensoviel Zeit für Rendering und Painting (also das, was die Folge der JS-Aktivität ist). In der FPS Leiste sieht man beim Wechsel der Fade-Richtung Einbrüche, hier braucht jQuery länger als einen Frame, um die neue Animation aufzusetzen.

Verwende ich dagegen dieses Fiddle, das ebensoviele Spans enthält aber mit CSS Transitionen den fade-out und fade-in durchführt, dann messe ich 2,4ms Scripting und 42ms Rendering+Painting, weil der Browser jetzt moderneren Code verwendet, der vermutlich auch Hardware-Support der Grafikkarte hat. Die FPS Leiste bleibt auf Anschlag.

Der jQuery-Ansatz ist also der Eselspfad, CSS Transition die Autobahn.

Auf einem fixen Desktop ist das wurscht. Auf einem Mobiltelefon kann das den Unterschied zwischen spielbar und Müll ausmachen.

Rolf (a.k.a. Macky Performance-Messer)

[Gunnar Bittersmann]

@@Rolf B

dieses Fiddle, das ebensoviele Spans enthält

… und einen Fehler: section.opaque { opacity: 0; } Etwas Opakes hat nicht die Opazität 0.

Es wäre besser gewesen, du hättest die Klasse „schnuckeldischnuck“ genannt.

Oder „transparent“: section.transparent { opacity: 0; } ergibt Sinn.

Oder du drehst die Logik um: section.opaque { opacity: 1; } ergibt auch Sinn.

LLAP 🖖

[JürgenB]

Hallo,

… viele kleine Objekte mittels FadeIn und FadeOut "blinken".

wie fadest du? Setzt du alle Zwischenwerte per Javascript, oder nur die Endwerte und überlässt das Faden dann einer css-Transition?

Gruß
Jürgen

[T-Rex]

Wie gesagt das spielt keine Rolle. Ich will die Performance des Javascript Codes sehen.

Dabei benutze ich das "normale" fadeIn, fadeOut von Query.

Gruß ausgefadeter

[1unitedpower]

Ich hab schon den Perfromance Tab im Chrome Inspektor gefunden. Damit komme ich aber nicht wirklich zurecht. Ich weiß nicht was mir der genau anzeigt. Hab schon versucht ein wenig damit zu spielen und hab mir Beispielseiten erstellt um das Ding mal ein wenig zu reizen. Aber ich verstehe es einfach nicht :(.

Du hast schon an der richtigen Stelle gesucht, die Performance-Tools von Chrome zeigen dir auf einer Zeitleiste diverse Aktivitäten an. Zu sehen sind da unter anderem der Haupt-JavaScript-Thread, Rendering-Threads, Netzwerk-Aktivitäten, und und und. Für dich relevant sind vor allem die gelben (scripting) und violetten (rendering) Bereiche. Dort kannst du übrigens auch ein FPS-Diagramm einblenden lassen oder schwächere CPUs simulieren, das macht Engpässe leichter erkennbar. So ganz einfach ist die Handhabung nicht, aber es ist auch keine Raketenwissenschaft. Mit der Anleitung des Chrome-Teams solltest du deine Flaschenhälse ermitteln können.

[T-Rex]

Hiho,

jap zu guter letzt war das wirklich die beste Wahl. Du hast auch schon alles gesagt was man dazu wissen muss. Anfangs unhandlich, keine Raketenwissenschaft, der Link ist goldwert und für mich waren die fps am wichtigsten. Wobei die fps aus dem Tool sehr schwer aus zu lesen sind. Wenn ein Bottleneck entsteht sinken sie auf 1fps was total schlecht ist. Läuft jedoch keine Animation wird auch 1fps angezeigt. hmpf... hat aber trotzdem geholfen.

Gruß 1rex