Javascript Performance testen

[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)