Finn Rudolph

07
Nov
2007
ImageFlow 0.4 online - Performance Benchmarking

ImageFlow, JavaScript, PHP von Finn Rudolph

Die vierte Version von ImageFlow ist mit zwei neuen Features online. Das Mausrad kann jetzt zum durchblättern benutzt werden. Und während die Bilder vom Browser geladen werden sieht der Benutzer einen Ladebalken. Die Funktionen von ImageFlow im Überblick:


  • Unterstützt alle Bild-Seitenverhältnisse
  • Dynamische Spiegelreflexionen (serverseitig via PHP)
  • 100% JavaScript (bis auf die Reflexion)
  • Mausrad Unterstützung
  • Ladebalken
  • Bildunterschrift
  • Skaliert 100% dynamisch
  • Einbindung durch div Tags
  • Kompatibel mit allen aktuellen Browsern

Seit der ersten Version, welche auf dem Code von Michael Perrys Cover Flow in Javascript aufbaute, habe ich versucht die Performance von ImageFlow zu optimieren. Version 0.4 scheint in dieser Hinsicht das Optimum zu sein. Die Versionsschritte kann man unter Refactor :my => code nachvollziehen.

Leider gibt es immer noch starke Performanceschwankungen zwischen den unterschiedlichen Browsern. Um das messbar zu machen, habe ich ein 10 Sekunden Benchmark für ImageFlow programmiert: http://benchimageflow.finnrudolph.de


Das Benchmark ermittelt die durchschnittliche Geschwindigkeit, mit der ein Browser die zentrale Schleife in ImageFlow durchläuft. Je schneller die Berechnung, desto flüssiger sollte die Animation sein. Unter Windows habe ich damit folgende Ergebnisse erzielt:

  • 0.4

    IE 7.0.5730.11

  • 0.7

    Firefox 2.0.0.9

  • 0.8

    Safari 3.0.3

  • 3.4

    Opera 9.24

Benchmarkergebnisse in ms für 10 Bilder (weniger ist besser)

Schon bei einem Benchmark mit 10 Bildern stellt man fest, dass die JavaScript Performance von Opera weit hinter der von anderen aktuellen Browsern liegt. Da ImageFlow aber auch mit sehr vielen Bildern funktionieren soll, habe ich die Browser mit einem 100 Bilder Benchmark getestet:

  • 11.0

    IE 7.0.5730.11

  • 18.1

    Firefox 2.0.0.9

  • 12.5

    Safari 3.0.3

  • 264.5

    Opera 9.24

Benchmarkergebnisse in ms für 100 Bilder (weniger ist besser)

Was sich in dem kleinen Benchmark schon abgezeichnet hat nimmt hier erstaunliche Ausmaße an. Während alle Browser erwartungsgemäß so um den Faktor 20 herum langsamer geworden sind bricht die Leistung von Opera um den Faktor 77 ein. Mit anderen Worten Opera ist 24 mal langsamer als der schnellste Browser im Benchmark!