Was soll gewählt werden, um Elemente von Webseiten zu animieren? JavaScript oder CSS? Diese Frage wird eines Tages jedem Webentwickler gestellt werden müssen. Und vielleicht - und nicht einmal.JavaScript-Programmierer haben viele Bibliotheken für Browseranimationen erstellt. Und es scheint, dass alle um uns herum geneigt waren, diese Bibliotheken als vorgefertigte Lösung für Animationen zu verwenden. Aber lass uns langsamer werden. Ist es richtig? Soll ich Webseitenelemente mit JavaScript animieren? Vielleicht können Sie sich auf Standard-CSS-Mechanismen verlassen und so qualitativ hochwertige und leistungsstarke Animationen erzielen?
Da Sie dies lesen, kann ich davon ausgehen, dass Sie mit JavaScript-Animationen vertraut sind. Daher schlage ich vor, das Thema CSS-Animation in seinen verschiedenen Erscheinungsformen zu untersuchen und - ich schlage vor, über die Leistung einer solchen Animation zu sprechen.Allgemeine Information
CSS-Animationen basieren auf einigen Elementeigenschaften. Unter diesen kann Folgendes festgestellt werden:- Eine Eigenschaft
position, die insbesondere die Werte absoluteund annehmen kann relative. - Eigentum
transform. - Eigentum
opacity. - Eigenschaften
left, right, top, bottom.
Schauen Sie sich zunächst einige Pilotprojekte an, die verschiedene CSS-Eigenschaften zum Animieren von Elementen verwenden.Hier ist ein Projekt, in dem ein Element mit einem Bezeichner animiert wird, animatedessen Eigenschaft positionauf einen Wert festgelegt ist absolute. Die Eigenschaften des Elements topund können sich ändern left.PilotprojektseiteUnten finden Sie den Code, der diese Animation implementiert.#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease infinite;
}
@keyframes move {
50% {
top: 200px;
left: 130px;
}
}
Hier ist ein Projekt, in dem dieselbe Animation mithilfe der CSS-Eigenschaft implementiert wird transform.Diese Animation wird durch den folgenden Code dargestellt:#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease infinite;
}
@keyframes move {
50% {
transform: translate(100px, 100px);
}
}
Lassen Sie uns diese Projekte verwenden, um Schlussfolgerungen über die Leistung von CSS-Animationen zu ziehen und darüber, welche Art von Systemressourcen für deren Implementierung verwendet werden.Wenn Sie sich nur die Seiten von Projekten ansehen, können Sie entscheiden, was in ihnen auf dieselbe Weise implementiert wird, wenn auch mit unterschiedlichen Ansätzen. Wenn Sie jedoch die Leistung dieser Projekte mithilfe der Chrome-Entwicklertools messen, stellt sich heraus, dass sie unterschiedlich sind.Wie zeigt der Browser die Seite an?
Bevor wir uns mit der Leistungsforschung befassen, müssen wir verstehen, wie der Browser die Seite anzeigt und welche Aktionen er ausführt, wenn Änderungen auf der Seite auftreten.So sieht der Seitenausgabevorgang aus.SeitenausgabeBerücksichtigen Sie die Ereignisse, die in dieser Abbildung dargestellt werden.Recalculate Style - Berechnung der Stile, die auf Elemente angewendet werden sollen.Layout - Erstellung von Layouts von Elementen und deren Platzierung auf der Seite.Paint- Füllen der Pixel der erstellten Ebenen, dh Erstellen von Rasterbildern für jede Ebene. Die GPU verwendet diese Bilder, um die Seite anzuzeigen.Composite Layer- Layoutebenen und zeige sie auf dem Bildschirm an. Das Ergebnis ist die fertige Seite.
Ein Ereignis Composite Layerist nur die Zeit, in der die CPU mit der GPU kommuniziert, um eine Animation zu erstellen. Mit CSS-Eigenschaften wie transformund opacitykönnen wir die Last der Generierung von Animationen von der CPU auf die GPU übertragen.Animation und GPU
Eine GPU ist im Wesentlichen ein spezialisierter Computer, der zum Arbeiten mit Bildern verwendet wird. Es kann große Mengen an Grafikinformationen effizient verarbeiten.Infolgedessen wird beim Eintreten eines Ereignisses Composite Layereine zusätzliche Ebene erstellt. Dies ist der Mechanismus, mit dem Sie vermeiden können, dass das animierte Element und andere Schnittstellenelemente erneut gerendert werden.In der folgenden Abbildung könnte man meinen, dass sich die animierten Elemente auf derselben Ebene befinden.Animierte Elemente ( Original )Wenn Sie die Ebenen jedoch so betrachten, als ob sie sich im dreidimensionalen Raum befinden, stellt sich heraus, dass bei der Implementierung der Animation mithilfe der Transformationseigenschaft eine zusätzliche Ebene für den roten Kreis erstellt wird. Dies ermöglicht die Ausgabe von hochleistungsfähigen, reibungslosen Animationen.Für das animierte Objekt wurde eine zusätzliche Ebene ( Original ) erstellt. DieGPU behält den Baum des Renderns von Objekten im Speicher bei und kann die entsprechende Ebene ohne erneutes Rendern über anderen Ebenen platzieren. Im Falle der Verwendung eines Objekts Animieren Eigenschaftentopundleftdie gleiche Schicht, aufgrund von Änderungen der Eigenschaften wird immer wieder gemacht. Wenn Sie sich für das Verhalten dieser CSS-Eigenschaften interessieren, wirkt sich heraus, dass oben und links das Layout der Seite beeinflussen, was dazu führt, dass die Seite neu gerendert und die Ebenen neu angeordnet werden müssen.Animation mit Eigenschaften übersetzen und Eigenschaften oben und links verwenden Indieser Abbildung sehen Sie einen gravierenden Unterschied zwischen Animationen, die mit Eigenschaftentranslateund Eigenschaftentopundimplementiert wurdenleft.Bei Animationen, die mittopund erstellt wurdenleft, wird der Kreis an jeder Position gerendert, bis er die äußerste Position erreicht. Danach beginnt er sich in die Ausgangsposition zu bewegen.Im Folgenden wird diePerformanceChrome Developer-Symbolleiste mit Details zum Animationsprozess angezeigt.Animation mit der Eigenschaft translate ( Original )Animation mit den Eigenschaften oben und links ( Original )Wenn Sie sich die detaillierten Informationen zu den einzelnen Aufgaben im Bedienfeld ansehenPerformance, können Sie daraus schließen, dass im Rahmen dieser Aufgaben verschiedene Aktionen ausgeführt werden. Bei Animationen oben / links führt die Aufgabe eine Neuberechnung der Stile, das Layout der Ebenen, die Aktualisierung des Ebenenbaums, die Erstellung eines Layouts und das Rendern durch. Bei der Übersetzung von Animationen besteht die einzige Aufgabe, die die GPU löst, darin, die Ebene zu verschieben, ohne etwas an das DOM auszugeben.Aufgrund der Verwendung leistungsstarker GPU-Funktionen und der Übersetzungsanimation wird der Hauptthread freigegeben. Dies verbessert die Anwendungsleistung. Die Verwendung der Animation oben / links führt zu einer großen zusätzlichen Belastung des Hauptthreads.Die Belastung des Hauptstroms, die durch die Übersetzungsanimation (links) und die Animation oben / links (rechts) (das Original ) erzeugt wurde.Die obige Abbildung zeigt deutlich die Belastung, die beim Ausführen der Animation oben / links auf den Hauptstrom fällt. Dies ist das Ergebnis ständiger Änderungen, die verarbeitet werden müssen, um eine solche Animation auszuführen.Zusammenfassung
Infolgedessen können wir den Schluss ziehen, dass es sich lohnt, mithilfe von CSS-Animationen genau darauf zu achten, welche Systemressourcen an ihrer Ausführung beteiligt sind. Wenn möglich, lohnt es sich, diejenigen zu verwenden, die von der GPU ausgeführt werden.Und welche Art von Animationen verwenden Sie in Ihren Projekten?