nicht angemeldet
Webseite bringt die CPU mit der Zeit zum Schwitzen - IE, FF, Chr
Guten Morgen,
nach dem Relaunch unserer Webseite gibt es ein kleines Problem und ich bin um Hilfe gebeten worden.
Nach einiger Zeit steigt die permanente CPU-Auslastung an. Das ist reproduzierbar im FF 28, IE 11, Chrome 34. Der entsprechende Prozess holt sich ca. alle 6 Sekunden ein paar Prozent mehr.
Im IE8 treten zwar Spitzen auf, die permanente CPU-Auslastung steigt aber nicht.
Das Monitoring mache ich unter Windows 7 mit dem Task Manager und dem Ressourcenmonitor.
Auf Grund des beobachteten Intervalls denke ich, dass das Problem in erster Linie beim Slider zu suchen ist.
Allerdings steigt die Auslastung auch, wenn ich den Slider-Knoten mit all seinen Kindern mit den Dev-Tools von Chrome oder Firefox aus dem Quelltext entferne. Etwas langsamer und ohne die Spitzen, aber stetig.
Die Demo des Sliders zeigt zwar die Spitzen, jedoch auch keinen Anstieg der permanenten CPU-Auslastung.
Mit meinem eher rudimentären Wissen um JavaScript-Debugging finde ich den Browser-Dev-Tools keinen Anhaltspunkt zur genauen Ursache.
Könntet ihr mir da evtl. ein wenig auf die Sprünge helfen?
Danke & Gruß
Ole
-
Hallo,
so etwas lässt sich mit der Chrome-Timeline debuggen. Zwei Sachen sehe ich da:
- Der Interval für das Zeichnen der Progress-Clock auf ein Canvas wird aufgerufen, obwohl sie bei dir gar nicht sichtbar ist. Ist sie wirklich sauber deaktiviert? Das Script sollte den Code dann gar nicht erst ausführen.
- Die Animation der Slides bringt den Browser dazu, das komplette Document neu zu layouten. W00t! Das ist eine sehr teure Operation, vor allem wenn sie in jedem Frame passiert.
Mein Tipp: Das lässt sich jetzt noch ewig untersuchen, aber die Grundursache ist höchstwahrscheinlich, dass das Script nicht auf Performance optimiert ist, sondern mit unnötigen Intervallen und Layout-invalidierenden Styles um sich wirft, dass es nur kracht.
Ein modernes Script sollte zumindest requestAnimationFrame und CSS-Transitions verwenden. Es ist schon sinnvoll, dass der Progress-Anzeiger mit Canvas gelöst ist (die Alternative wäre SVG), aber performant umgesetzt ist das nicht.
Allgemein:
http://shouldiuseacarousel.com/Mathias
-
Hallo Mathias,
wieder einmal hast du mich einen großen Schritt weiter gebracht. Eigentlich sogar mehrere :)
Vielen Dank.
Gruß
Ole