Ist es besser, jQuery fadeIn oder CSS3 Animationen zu verwenden?

Question

Ich erstelle eine einfache Galerie mit etwas PHP und JavaScript und versuche, einen Überblendungsübergang zwischen Bildern durchzuführen. Dann fragte ich mich, ob es einen Unterschied in der Leistung zwischen der Verwendung einer CSS-Animation ist, z.B .:

@-webkit-keyframes fadeIn { 
0% { opacity: 0; } 
100% { opacity: 1; } 
} 

und ein jQuery fadeIn.

Ich möchte den Rückruf von der FadeIn verwenden, aber ich kann auch einfach einen Timer mit der CSS verwenden, denke ich.

Sind beide wahrscheinlich besser mit großen Bildern arbeiten? Ich sehe keinen Unterschied, frage mich aber, ob es sich auf langsamere Computer auswirken könnte.

Answer 1

Wie wäre es mit einem Fallback zum anderen? Verwenden Sie nach Möglichkeit CSS3-Übergänge, und verwenden Sie eine Feature-Erkennungsbibliothek wie Modernizr, um festzustellen, ob der Browser des Benutzers CSS3-Übergänge ausführen kann.

Wenn AND ONLY Wenn der Browser des Benutzers keine nativen Animationen unterstützt, sollten Sie nur jQuery verwenden.

Native Animationen sind GPU-beschleunigt, was zu weniger Einschränkungen für die CPU und viel weichere Animationen führt. Außerdem benötigt IT weder JAVASCRIPT noch zusätzliche Anforderungen.

Answer 2

Nun, ich denke, die Verwendung von CSS-Animation ist viel besser, wenn es einen unterstützten Browser gibt und Sie sollten jQuery nur als Backup für nicht unterstützte Browser verwenden. Wie ausführlich unter http://dev.opera.com/articles/view/css3-vs-jquery-animations erklärt, führten sie einen Test zur Animation von 300 divs gleichzeitig mit CSS und jQuery durch und bemerkten einen großen Unterschied zwischen den Leistungsstatistiken.

Statistik mit CSS die Animation waren:

- Anzahl der Aktionen durchgeführt um die Animation zu beenden: 100
- Zeit genommen Ausführung der Animation zu beenden: 2,9 Sekunden
- Speicher am Ende verbraucht der Animation: 1.5 MB

und Statistik mit jQuery waren:

- Anzahl der Aktionen um die Animation zu beenden durchgeführt: 2119
- Ausführen der Animation zu beenden Zeit genommen: 5 Sekunden
- Speicher am Ende der Animation verbraucht: 6 MB

So, wie Sie kann sehen, es gibt einen großen Unterschied zwischen der Leistung. Dies liegt daran, dass der CSS-Prozessor des Browsers in C++ geschrieben ist und nativer Code sehr schnell ausgeführt wird, während jQuery (JavaScript) eine interpretierte Sprache ist und der Browser JavaScript nicht rechtzeitig vorausberechnen kann, in Bezug darauf, welches Ereignis als nächstes eintreten wird schränkt Browser ein, um sie für die Leistung zu optimieren. Ich hoffe das beantwortet deine Frage.