Unterschiedliche Scriptgeschwindigkeit in Browsern

[T-Rex]

Moin,

ich habe mir erlaubt das awwwards js für die Bewertungskreise nachzubauen. Also das Ding, das den Kreis von 0 auf z.B. 7.63 hochzieht. Guckst du hier.

Da gibt es jedoch ein klitze kleines Problem. Das Skript läuft in unterschiedlichen Browsern unterschiedlich schnell. Das hat zur Folge, dass im Chrome die Kreise "normal" schnell aufgefüllt werden, im Firefox dauert es hingegen länger. Sehr viel länger.

Obwohl ich ein Interval von 30ms habe, habe ich mal geguckt wie lange die komplette Funktion braucht um komplett durch zulaufen. Bei 53 Durchläufen * 30 ms gibt das ca. 1600 ms für die komplette Funktion. Im Chrome sind es jedoch 1700 ms und im Firefox sogar 4200 ms.
Stoppt man die Zeit pro Durchlauf sieht man, dass der Firefox sich nicht an die vorgegebenen 30ms hält. Ich muss auch sagen, dass dieser Rechner an dem ich gerade bin ein relativ schlechter Rechner ist und der Firefox sehr viele Tabs offen hat bzw. mit 300 MB den Arbeitsspeicher ziemlich belegt.

Da kommt mir doch die einfache Frage - wieso ist das eigentlich so? Liegt es wirklich wie ich vermute am Abreitsspeicher bzw. CPU Auslastung?
Und wenn ja - weiß jemand wie man das beheben kann?

Ich hab mir jetzt einen workaround gebastelt. Ich schau zu aller erst wie groß die "Verzögerung ist" und bastelt diese Verzögerung in das Script, dass die Kreise hochzählt ein. Somit bekommen die Kreise einen höheren Sprung, den sie nach oben zählen. Es sieht dann aus wie ein Ruckeln. Nicht besonders hübsch, aber immer noch besser als 10 Sekunden zu warten :D.
Gute Idee? Bessere Vorschläge?

Gruß
Dauerkarten Produzent
T-Rex

[M.]

Mahlzeit,

Da kommt mir doch die einfache Frage - wieso ist das eigentlich so? Liegt es wirklich wie ich vermute am Abreitsspeicher bzw. CPU Auslastung?

Genau daran kann das liegen.

Und wenn ja - weiß jemand wie man das beheben kann?

Mit nem schnelleren Rechner. Browser brauchen soviel CPU für solche Spielereien, da ist ein Dualcore schon fast Pflicht.
Natürlich je nach Script. Z.B. ein Bildscrolling von 4 Bildern per jQuery auf nem Raspberry ist ein geruckel ohne Ende.

Gute Idee? Bessere Vorschläge?

Wenn das das Problem behebt, gute Lösung. Würd ich genauso machen

[T-Rex]

Da kommt mir doch die einfache Frage - wieso ist das eigentlich so? Liegt es wirklich wie ich vermute am Abreitsspeicher bzw. CPU Auslastung?

Genau daran kann das liegen.

Dann frage ich mich wieso der Chrome keine Probleme hat. Der läuft doch auf dem gleichen Rechner. Außerdem scheint es auch Unterschiede zu geben ob viel oder wenig auf der Seite zu sehen ist. Auf meiner Testseite wo man nix sieht außer das Script läuft es im Firefox ähnlich normal schnell wie im chrome. Baue ich es auf die richtige Seite ein (mit Menü und Bild) wird es firefox gebremst.

Gruß
Spendenaufruf für bessere Hardware
T-Rex

[M.]

Mahlzeit,

Dann frage ich mich wieso der Chrome keine Probleme hat. Der läuft doch auf dem gleichen Rechner.

Andere Renderengine ;)

Außerdem scheint es auch Unterschiede zu geben ob viel oder wenig auf der Seite zu sehen ist.

Spricht für ein Arbeitsspeicherproblem. Und der FF ist ein Speicherfresser.

Auf meiner Testseite wo man nix sieht außer das Script läuft es im Firefox ähnlich normal schnell wie im chrome. Baue ich es auf die richtige Seite ein (mit Menü und Bild) wird es firefox gebremst.

Deshalb nutze ich keinen FF mehr. Der ist von nem geilen Browser zu Softwareschrott verkommen.

[unknown]

Da gibt es jedoch ein klitze kleines Problem. Das Skript läuft in unterschiedlichen Browsern unterschiedlich schnell. Das hat zur Folge, dass im Chrome die Kreise "normal" schnell aufgefüllt werden, im Firefox dauert es hingegen länger. Sehr viel länger.

Das ist ja 1) nirgendwo spezifiziert (wie auch) und 2) erfüllt ein Browser keine realtime-Anforderungen.

Und wenn ja - weiß jemand wie man das beheben kann?

Nimm ein Framework welches Animationen unterstützt.
Diesen gibst du i.d.R. eine Laufzeit vor, also deine 1600 ms. Wenn dann das Animationscallback gerufen wird, berechnen sie die Differenz aus aktueller Zeit und Startzeit. Und damit wird dann deine zu animierende Größe zw Anfangswert und Endwert berechnet.

[T-Rex]

Nimm ein Framework welches Animationen unterstützt.

Tatsache... Da ich sowieso schon jQuery benutze hab ich mal die animate() Funktion ausprobiert. Und siehe da... Es ruckelt zwar nach wie vor im Firefox, aber ich muss nichts selbst berechnen. Mein Code ist jetzt unkomplizierter und schlanker (und läuft wahrscheinlich in ein paar Browsern mehr).

Danke für die Hilfe

Gruß
Animationsgott
T-Rex

[unknown]

Es ruckelt zwar nach wie vor im Firefox

Hmm, wundert mich aber schon, ein wenig.
300MB Speicherauslastung sind jetzt auch nicht die Welt.
Soweit ich das jetzt auf die Schnelle gesehen habe, verwendet jQuery ein Intervall für alle Animationen, also selbst wenn du mehrere Elemente/Eigenschaften parallel animierst, wird nur einmal gerendert.
Das sind abern nicht Massen an Elementen, die du animierst?

[T-Rex]

Das sind abern nicht Massen an Elementen, die du animierst?

Nein.
Ich hab sogar das komplizierte Kreismodel durch ein einfaches Balkendiagramm ersetzt. Jetzt sind es 5 Balken und 5 Zahlen die hochgezählt werden. Im Chrome läuft es flüssig, im Firefox ruckelt es ein wenig.
Ich muss aber auch sagen, dass selbst das Scrollen im Firefox ruckelt. Zumindest auf manchen Seiten. Auf welchen Seiten ist dabei völlig unterschiedlich. Sogar das selfhtml Forum ruckelt ein Stück beim scrollen. Ich habe absolut keine Idee....

Gruß
ruckliger
T-Rex

[bubble]

Sogar das selfhtml Forum ruckelt ein Stück beim scrollen. Ich habe absolut keine Idee....

In Blink gibt's 'nen Feature, dass sich lazy block layout nennt. Dadurch werden nur die wirklich relevanten Elemente erstmal beim rendern berücksichtig.
Für Gecko hab ich von sowas noch nichts gefunden im Netz.

Wenn ich die Hauptseite vom Forum unter Firefox öffne, friert FF kurzer Hand für (ganz grob) eine Sekunde ein, bis er wieder reagiert. Unter Chrome dagegen kann ich sofort runter scrollen.
Noch besser kann ich das auf http://www.w3.org/html/wg/drafts/html/master/single-page.html bemerken, wärend Firefox die Seite noch läd, zu scrollen is eine verdammt ruckelige Angelegenheit, bei Chrome ist es fast komplett ruckelfrei.

MfG
bubble

[1UnitedPower]

Meine Herren

eine so simple Animation dürfte eigentlich keinen Rechner in die Knie zwingen, auch wenn er nur über 300mb RAM verfügt.

Du sprichst von Intervallen, deshalb rate ich mal, dass du setInterval für deine Animation benutzt. Besser wäre requestAnimationFrame zu nutzen, dann kennt der Browser deine Intention und kann seinerseits Optimierungen vornehmen.

Eine reine CSS-Lösung wäre vermutlich noch performanter.

[molily]

Hallo,

Du sprichst von Intervallen, deshalb rate ich mal, dass du setInterval für deine Animation benutzt. Besser wäre requestAnimationFrame zu nutzen, dann kennt der Browser deine Intention und kann seinerseits Optimierungen vornehmen.

Wichtig ist hier zu wissen, dass requestAnimationFrame eine Framerate von 60 anpeilt. Es wird also maximal 60-mal pro Sekunde neu gezeichnet. Ein Frame dauert also 16.666… Millisekunden. In dieser Zeit muss die Funktion den Animations-Schritt vollziehen, also z.B. Daten berechnen und DOM-Änderungen vornehmen *und* der Browser muss die Änderungen zeichnen. Die Step-Funktion muss soweit optimiert sein, dass noch genug Zeit ist, die Styles/das Layout neu zu berechnen und die Elemente zu zeichnen. Diese Optimierung muss man im Grunde selbst vornehmen.

Ansonsten erreicht man nicht 60fps und einige Frames werden kurzerhand ausgelassen, was die Gesamtlaufzeit der Animation m.W. verändert. Daher der Hinweis von unknown, Bibliotheken zu verwenden, die eine Auto-Korrektur verwenden.

Grüße,
Mathias

[bleicher]

Grüße,
ich würde jetzt pauschla sagen, dass es mit CSS3 (transition mit rotation und duration) gehen sollte - die performance kann ich nicht beurteilen, aber das wäre ein versuch wert - evtl. wäre JS dann nur als Fallback für CSS3 unfähige browser nötig. Erfahrungsgemäß geht CSS fast immer schneller. Ausnahme seltsame kombinationen mit transparenzeffekten und HW-beschleunigung.
MFG
bleicher

[T-Rex]

Für sowas bin ich immer offen !!
Wenn du mir sagst wie man Zahlen mittels CSS hochzählen kann, wäre das wirklich eine super Sache.

Gruß
Erwartungsvoller
T-Rex

[bleicher]

Grüße,

Wenn du mir sagst wie man Zahlen mittels CSS hochzählen kann, wäre das wirklich eine super Sache.

Schau mal in die richtung:
http://blakek.us/labs/jquery/css3-pie-graph-timer/
MFG
bleicher

[JürgenB]

Hallo T-Rex,

ich habe mir erlaubt das awwwards js für die Bewertungskreise nachzubauen. Also das Ding, das den Kreis von 0 auf z.B. 7.63 hochzieht. Guckst du hier.

wie hast du das denn gemacht? Diese Seite benutzt Canvas und läuft unter Windows 7 im IE, FF und Chrome etwa gleich schnell.

Gruß, Jürgen