Webseite bringt die CPU mit der Zeit zum Schwitzen - IE, FF, Chr

[molily]

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