mkong: Firefox 2: Javascript beschaeftigt CPU

Hi,

ich habe ein kleines javascript gebastelt, welches 2 <div> Elemente durch die kontinuierliche Aenderung der Position ( CSS-Eigenschaft ) ueber den Bildschirm sliden laesst. Funktioniert in allen Browsern prima, nur im firefox 2 erzeugt das script eine viel zu hohe CPU-Auslastung ( auf CPUs < 1 GHz 100%). Die Auslastung sinkt etwas wenn ich den HTML Inhalt im div oder die Geschwindigkeit verringere, oder das fenster minimiere. Hat jemand aehnliche Probleme oder einen Loesungsvorschlag?

Das script ist vergleichbar mit diesem Beispiel auf selfthtml.org:

http://de.selfhtml.org/dhtml/modelle/dom.htm#css_eigenschaften

Hier der Code:

var sp = 0;
var sp2 = 0;

function latestitemsslider(){

sp += 1;
  document.getElementById('tickerslide1').style.left = sp + "px" ;

if(sp > 1400) {
   sp = 0;
   AjaxRequest('/getTickerContents/ajax/','tickerslide2', '');
  }

sp2 = sp - 1400;
  document.getElementById('tickerslide2').style.left = sp2 + "px";

if(sp == 1200) {
   AjaxRequest('/getTickerContents/ajax/','tickerslide1', '');
  }

window.setTimeout("latestitemsslider()", 50);
 }

  1. Hi mkong,

    1. wie du evtl. weißt gibt es viele Leute - besonders hier im Forum - die solche javascripts überhaupt nicht mögen. Also überlege dir doch mal ob du nicht drauf verzichten kannst

    2. Ich denke mal es gibt kaum noch rechner die mit unter 1 GHz und Firefox ins Netz gehen. Wenn ja, kommen die überhaupt auf deiner Seite vorbei. Gehört deine Seite evtl. in deren Themengebiet ?

    Mfg Davok`xarden

    1. Hallo,

      1. Ich denke mal es gibt kaum noch rechner die mit unter 1 GHz und Firefox ins Netz gehen.

      Ich habe hier zwar einen Sempron 2400+, aber ich denke trotzdem, dass das Script des OP irgendwo dafür schuld ist, da das SELFHTML-Beispiel - auf welches er verwiesen hat, die CPU-Auslastung durch den Firefox nicht mal auf 1% anhebt…

      mfg. Daniel

      1. Ich habe hier zwar einen Sempron 2400+, aber ich denke trotzdem,

        »»dass das Script des OP irgendwo dafür schuld ist, da das
        »»SELFHTML-Beispiel - auf welches er verwiesen hat, die CPU-Auslastung
        »»durch den Firefox nicht mal auf 1% anhebt…

        Dort befinden sich aber auch nur 2 kleine Grafiken im div - html inahlt. Nach meinen Experimenten zu urteilen verhaelt sich die CPU Last etwa 1:1 direkt proportional zum Quelltext.

        1. Hallo,

          […] Nach meinen Experimenten zu urteilen verhaelt sich die CPU Last etwa 1:1 direkt proportional zum Quelltext.

          Das kommt darauf an, welchen Quelltext du meinst. Das was z.B. nicht ständig mit setTimeout wiederholt wird, ist sogut wie gar nicht dafür verantwortlich.

          Kannst du evtl. mal ein kleines Beispiel erstellen?

          mfg. Daniel

          1. […] Nach meinen Experimenten zu urteilen verhaelt sich die CPU Last etwa 1:1 direkt proportional zum Quelltext.

            Das kommt darauf an, welchen Quelltext du meinst. Das was z.B. nicht ständig mit setTimeout wiederholt wird, ist sogut wie gar nicht dafür verantwortlich.

            Ah, sorry, ich meine den Quelltext innerhalb des div-Elements. Ich versuche das mal gerade Stueck fuer Stueck an einem Beispiel zu konstruieren und stelle es dann online wenns es fertig ist. Das Original ist leider unter Verschluss und der Slider dort mit allerhand drumherum eingebettet.
            Viel text im div fuehrt nicht zu Problemen, ich werde jetzt noch ein bisschen HTML und CSS einfuegen, dann sollte es eigentlich sichtbar werden.

            1. Das Problem scheint sich leider nicht auf einfache Weise rekunstruieren zu lassen, ich habe jetzt eine Seite nur mit dem Slider erstellt und es gibt keine CPU-Probleme. Seite alleine und Slider alleine funktionieren also, nur zusammen gibt es die CPU Probleme. Wird wohl noch dauern bis ich das ergruendet habe....

              1. Hallo,

                Das Problem scheint sich leider nicht auf einfache Weise rekunstruieren zu lassen,

                Schade.

                ich habe jetzt eine Seite nur mit dem Slider erstellt und es gibt keine CPU-Probleme.

                Vielleicht solltest du den „AjaxRequest“ mal genauer unter die Lupe nehmen. Vielleicht wird der ja jedes Mal ausgeführt.
                Du kannst ja mal etwas wie
                document.body.appendChild(document.createTextNode("ajaxRequst wird ausgeführt… "))

                An die Stelle schreiben, wo die Funktion ausgerufen wird. Wenn dein Dokument anschließend riesen groß ist, weißt du ja woran es liegt.

                alert() könntest du ja zwar auch verwenden, aber im Falle einer Endlosschleife kann das ziemlich nervig werden ;-)

                Ansonsten halt von unten nach oben neu aufbauen und nach jeder kleiner Änderung im Firefox testen.

                mfg. Daniel

                1. Vielleicht solltest du den „AjaxRequest“ mal genauer unter die Lupe nehmen. Vielleicht wird der ja jedes Mal ausgeführt.
                  Du kannst ja mal etwas wie
                  document.body.appendChild(document.createTextNode("ajaxRequst wird ausgeführt… "))

                  An die Stelle schreiben, wo die Funktion ausgerufen wird. Wenn dein Dokument anschließend riesen groß ist, weißt du ja woran es liegt.

                  alert() könntest du ja zwar auch verwenden, aber im Falle einer Endlosschleife kann das ziemlich nervig werden ;-)

                  Ansonsten halt von unten nach oben neu aufbauen und nach jeder kleiner Änderung im Firefox testen.

                  mfg. Daniel

                  Moin!

                  Der Ajax-Request verursacht keine Probleme, ich habe das Problem rekonstrieren koennen:

                  http://www.dillout.de/share/test.html

                  Die Version verwendet grosse bilder, die vom browser neu skaliert werden. Bringt meine 2,8 GHz CPU in Firefox2 auf 35 %, IE7 braucht nur 0-1%.

                  Eine zweite Version mit den Bildern schon vorskaliert und in Originalgroesse verwendet ( 0-1%CPU in FF2 und IE7):

                  http://www.dillout.de/share/retest.html

                  1. http://www.dillout.de/share/test.html

                    Die Version verwendet grosse bilder, die vom browser neu skaliert werden. Bringt meine 2,8 GHz CPU in Firefox2 auf 35 %, IE7 braucht nur 0-1%.

                    Eine zweite Version mit den Bildern schon vorskaliert und in Originalgroesse verwendet ( 0-1%CPU in FF2 und IE7):

                    http://www.dillout.de/share/retest.html

                    Alo bei mir machen die beiden Seiten keinen Unterschied, beide brauchen ca. 20% Leistung im FF 2. auf einem 1GHz Rechner.

                    Dein HTML Konstrukt ist aber auch extrem, drei ineiander verschachtelte und positionierte Elemente und dann nochmal eine Tabelle, schon allein das entfernen der Tabelle reduziert bei mir die CPU Belastung auf 1-2%

                    Struppi.

                    --
                    Javascript ist toll (Perl auch!)
                    1. Alo bei mir machen die beiden Seiten keinen Unterschied, beide brauchen ca. 20% Leistung im FF 2. auf einem 1GHz Rechner.

                      OK, dann tritt der Fehler bei dir nicht auf. Seltsam. Ich hatte auf anderen Rechnern mit verschiedenen OS ebenfalls die Probleme.

                      Dein HTML Konstrukt ist aber auch extrem, drei ineiander verschachtelte und positionierte Elemente und dann nochmal eine Tabelle, schon allein das entfernen der Tabelle reduziert bei mir die CPU Belastung auf 1-2%

                      Struppi.

                      Ja, die 20 % auf einer 1GHz CPU sind auch in Ordnung, aber 100% solltens halt nicht sein bzw. 25% auf meiner 2,8GHz CPU. Zumal es ja scheinbar auch anders geht, bei dir sogar in FF2.

                      1. OK, dann tritt der Fehler bei dir nicht auf. Seltsam. Ich hatte auf anderen Rechnern mit verschiedenen OS ebenfalls die Probleme.

                        ich werd das später nochmal auf einem anderen Rechner testen.

                        Ja, die 20 % auf einer 1GHz CPU sind auch in Ordnung, aber 100% solltens halt nicht sein bzw. 25% auf meiner 2,8GHz CPU. Zumal es ja scheinbar auch anders geht, bei dir sogar in FF2.

                        Naja, wenn schon dieses Konstrukt bei dir so umständlich aufgebaut ist, wer weiß wie der Rest aussieht?

                        Struppi.

                        --
                        Javascript ist toll (Perl auch!)
    2. Hey, danke fuers reply!

      1. wie du evtl. weißt gibt es viele Leute - besonders hier im Forum
      • die solche javascripts überhaupt nicht mögen. Also überlege dir
        doch mal ob du nicht drauf verzichten kannst

      Hm, aber leider lassen sich viele dynamische Funktionen die die Seitenbesucher gerne sehen wuerden am einfachsten darueber realisieren. Alternative waere Flash oder Java, auch nicht das Gelbe vom Ei. Ausserdem funktionierts ja in allen anderen Browsern bzw. aelteren Versionen prima. Das ist es was mich am meisten verwundert. Koennte das evtl. mit Javascript 1.7 zusammenhaengen?

      1. Ich denke mal es gibt kaum noch rechner die mit unter 1 GHz und

      »»Firefox ins Netz gehen. Wenn ja, kommen die überhaupt auf deiner
      »»Seite vorbei. Gehört deine Seite evtl. in deren Themengebiet ?

      Auch auf schnelleren CPUs ist es unschoen wenn die Seite 20-30 prozent der leistung zieht und auf der Seite ist mit ein paar tausend Nutzern pro tag zu rechnen, waer also schon angebracht diesen missstand irgendwie zu beheben.

      m

  2. Hallo mkong,

    ich habe Dein Script gerade mal bei mir laufen lassen. Die CPU-Auslastung ist wie zu erwarten vernachlässigbar. Es kam auch keine Warnung. Da die Ajax-Anfragen auch nur ganz selten kommen, kann es daran auch nicht liegen.

    Wie sehen die Elemente denn aus, die du bewegst?
    Wie groß ist die CPU-Auslastung in anderen Browsern?

    Der FF bringt eine Warnung, wenn ein Script mit hoher CPU-Belastung länger als (ich glaube) fünf Sekunden am Stück läuft. Beim IE kommt die Meldung erst viel später.

    Auf meinen Seiten habe ich Scripte, die die CPU deutlich länger belasten, ohne Probleme. Ich "zerlege" aber die Läufe auch mit setTimeout in kleine Portionen.

    Gruß, Jürgen

    1. ich habe Dein Script gerade mal bei mir laufen lassen. Die CPU-Auslastung ist wie zu erwarten vernachlässigbar. Es kam auch keine Warnung. Da die Ajax-Anfragen auch nur ganz selten kommen, kann es daran auch nicht liegen.

      Wie sehen die Elemente denn aus, die du bewegst?
      Wie groß ist die CPU-Auslastung in anderen Browsern?

      Die bewegten Elemente in den sind 2 schmale <divs>, darin befinden sich mehrere CSS- formatierte Sub-Divs mit Bildern, Links und Text.
      In anderen Browsern betreagt die CPU Auslastung zwischen 1/7 und 1/3 des Wertes vom Firefox

      Ich werde jetzt mal ein vergleichbares Beispiel basteln und es demnaechst hier posten.

  3. Hi,

    ich habe ein kleines javascript gebastelt, welches 2 <div> Elemente durch die kontinuierliche Aenderung der Position ( CSS-Eigenschaft ) ueber den Bildschirm sliden laesst. Funktioniert in allen Browsern prima, nur im firefox 2 erzeugt das script eine viel zu hohe CPU-Auslastung ( auf CPUs < 1 GHz 100%). Die Auslastung sinkt etwas wenn ich den HTML Inhalt im div oder die Geschwindigkeit verringere, oder das fenster minimiere. Hat jemand aehnliche Probleme oder einen Loesungsvorschlag?

    Nach langer Bastelei habe ich nun den Ursprung des Problems erkannt:

    Im div-Element befinden sich mehrere Images, die nicht in der Originalgroesse angezeigt werden, somit vom Browser neu berechnet werden muessen. Firefox 2 scheint nun fuer jede Positionsaenderung die Images neu zu berechnen, was zu der hohen CPU-Last fuehrt. Andere Browser berechnen die Images nur einmal und cachen sie, deswegen fuerhrt das bewegen von neu skalierten Images dort nicht zu Problemen.

    1. Nach langer Bastelei habe ich nun den Ursprung des Problems erkannt:

      Im div-Element befinden sich mehrere Images, die nicht in der Originalgroesse angezeigt werden, somit vom Browser neu berechnet werden muessen. Firefox 2 scheint nun fuer jede Positionsaenderung die Images neu zu berechnen, was zu der hohen CPU-Last fuehrt. Andere Browser berechnen die Images nur einmal und cachen sie, deswegen fuerhrt das bewegen von neu skalierten Images dort nicht zu Problemen.

      Kann ich nicht nachvollziehen.

      Struppi.

      --
      Javascript ist toll (Perl auch!)
      1. Nach langer Bastelei habe ich nun den Ursprung des Problems erkannt:

        Im div-Element befinden sich mehrere Images, die nicht in der Originalgroesse angezeigt werden, somit vom Browser neu berechnet werden muessen. Firefox 2 scheint nun fuer jede Positionsaenderung die Images neu zu berechnen, was zu der hohen CPU-Last fuehrt. Andere Browser berechnen die Images nur einmal und cachen sie, deswegen fuerhrt das bewegen von neu skalierten Images dort nicht zu Problemen.

        Kann ich nicht nachvollziehen.

        Struppi.

        Ok, ich habe das weiter getestet, der Fehler tritt nicht zwingend bei browserskalierten Images auf , ich habe mal die browserskalierten Images  ohne drumherum ( kein CSS oder weiteres HTML) bewegen lassen und die CPU bleibt entspannt.

        Durch Verwenden der Bilder in Originalgroesse hat sich aber mein urspruengiliches Problem loesen lassen, also gibts da irgendwie einen Zusammenhang. Verwirrend das.