Optimierung von CSS: Animationsleistung mit Devtools optimieren

CSS Animation Performance -Optimierungsanleitung: Verwenden von Browser -Entwickler -Tools zur Verbesserung der Animation Fluency

Dieser Artikel wird in Zusammenarbeit mit SiteGround erstellt. Vielen Dank an unsere Partner, die SitePoint unterstützen.

Wie wir alle wissen, ist die CSS -Animationsleistung normalerweise sehr hoch. Für Szenen, die eine große Anzahl von Elementen oder komplexen Animationen enthalten, wird der Code jedoch nicht für die Leistung optimiert, sondern die Animation stottert und die Benutzererfahrung beeinflusst.

In diesem Artikel werden einige praktische Browser -Entwickler -Toolfunktionen eingesetzt, mit denen Sie den laufenden Mechanismus hinter CSS -Animationen überprüfen können. Wenn die Animation steckt, können Sie die Gründe besser verstehen und sie beheben.

Schlüsselpunkte

• Verwenden Sie Browser -Entwickler -Tools, um die CSS -Animationsleistung zu optimieren, Probleme zu identifizieren, die Animationsverzögerung verursachen, und erhalten Sie Einblick in den zugrunde liegenden Betrieb der Animation. Diese Tools können die Bildraten überprüfen, den Code überprüfen, bearbeiten und Debuggen analysieren und Layout- und Zeichnungsvorgänge analysieren, die die Leistung beeinflussen können.
• Um reibungslose Animationseffekte zu erzielen, sollte die Zielbildungsrate 60 fps (Frames pro Sekunde) erreichen. Um eine glattere Animation zu gewährleisten, sind nur die Deckkraft, Transformationen und Filter von CSS animiert. Das Animieren anderer Eigenschaften kann Druck auf den Browser ausüben und ihn dazu zwingen, kostspielige Aufgaben in kürzester Zeit auszuführen, was zu schlechten Ergebnissen führt.
• Verwenden Sie das Attribut will-change CSS oder translateZ(0) und translate3d(0,0,0) -Techniken, um den Browser zu zwingen, einige Eigenschaftenänderungen an der GPU (Grafikverarbeitungseinheit) zur Verarbeitung zu übergeben. Dies nutzt die Beschleunigung der Hardware und lindert einen Teil des Drucks auf den Hauptbrowser -Thread. Überbeanspruchung kann jedoch Probleme verursachen, die Sie vermeiden möchten, wie z. B. Animationsstottern.

Entwicklertools und CSS -Leistungsanalyse

Ihre Animation muss 60 fps erreichen, um im Browser reibungslos zu laufen. Je niedriger die Bildrate, desto schlechter der Animationseffekt. Dies bedeutet, dass der Browser nur etwa 16 Millisekunden pro Rahmen hat, um seine Arbeit zu erledigen. Aber was hat es in dieser Zeit getan? Woher wissen Sie, ob Ihr Browser mit dem erforderlichen Framerate Schritt hält?

Ich denke, es gibt nichts Wichtigeres als die Benutzererfahrung bei der Bewertung der Animationsqualität. Obwohl moderne Browser -Entwickler -Tools nicht immer 100% zuverlässig sind, werden sie immer schlauer und Sie können sie verwenden, um Ihren Code zu überprüfen, zu bearbeiten und zu debuggen.

Gleiches gilt, wenn Sie die Bildrate und die CSS -Animationsleistung überprüfen müssen. So funktioniert es.

Firefox Performance Tool Exploration

In diesem Artikel verwende ich Firefox Performance Tools. Ein weiterer wichtiger Anwärter sind Chrome Performance Tools. Sie können Ihr Lieblingswerkzeug auswählen, da beide Browser leistungsstarke Leistungsfunktionen bieten.

Um die Entwicklerwerkzeuge in Firefox zu öffnen, wählen Sie eine der folgenden Optionen aus:

• Klicken Sie mit der rechten Maustaste auf Ihre Webseite und wählen Sie Elemente im Kontextmenü.
• oder verwenden Sie Tastaturverknüpfungen: Drücken Sie Strg Shift I unter Windows und Linux und cmd opt i auf macOS.

Klicken Sie als nächstes auf die Registerkarte Performance. Hier finden Sie eine Schaltfläche, mit der Sie mit der Aufzeichnung der Leistungsdaten Ihrer Website beginnen können:

Drücken Sie diese Taste und warten Sie einige Sekunden oder führen Sie eine Aktion auf der Seite aus. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche "Aufzeichnung der Aufnahme der Leistung anstellen":

In einem Moment präsentiert Firefox Ihnen viele gut organisierte Daten, um zu verstehen, welche Probleme in Ihrem Code sind.

Die Aufzeichnungsergebnisse im Performance -Panel sind wie folgt:

Der Abschnitt "Wasserfall" eignet sich hervorragend für die Überprüfung von Problemen im Zusammenhang mit CSS -Übergängen und Keyframe -Animationen. Die anderen Teile sind "Call Tree" und "JS Flame Graph", mit denen Sie Engpässe im JavaScript -Code finden können.

Die Wasserfallflussansicht hat einen zusammenfassenden Abschnitt und einen detaillierten Zusammenbruch oben. In beiden Fällen sind die Daten farbcodiert:

• Gelb Balken zeigt den JavaScript -Betrieb an.
• Die lila Balken repräsentiert den CSS -Stil (neu berechnen) und das Seitenlayout (Layout), das HTML -Elemente berechnet. Layoutoperationen sind für den Browser ziemlich teuer. Wenn Sie also Eigenschaften mit doppelten Layouts animieren (auch als "Reflow" - beispielsweise margin, padding, top, left,
,
• usw.), das Ergebnis kann stottert werden. color background-color Der grüne Balken zeigt an, dass das Element in ein oder mehrere Bitmaps (Draw) gezogen wird. Animationsattribute wie box-shadow,
,

und andere Attribute beinhalten teure Zeichenvorgänge, was der Grund für langsame Animationen und schlechte Benutzererfahrung sein kann.

Sie können auch die zu prüfenden Datentypen filtern. Zum Beispiel interessiere ich mich nur für CSS-bezogene Daten, sodass ich alles andere deaktivieren kann, indem ich auf das Filtersymbol in der oberen linken Ecke des Bildschirms klicke:

Die grüne Balken unterhalb der Wasserfallflusszusammenfassung zeigt die Bildrate -Informationen an.

Der gesunde Ausdruck sollte ziemlich hoch aussehen, aber vor allem Konsistenz - das heißt, es gibt nicht zu viele tiefe Lücken.

veranschaulichen wir dies mit einem Beispiel.

praktisches Werkzeugkampf @keyframes

Dies ist eine einfache CSS -Animation mit dem Schlüsselwort . Die Testseite sieht so aus:

rechteckige lila Rahmen rutscht in einer unendlichen Schleife hinein und außerhalb der Sicht.

Ich mache dies durch Animation, die das Attribut <div> des <code>margin-left -Elements des Rechteckfelds auf dem Bildschirm darstellt. @keyframes Animationsblöcke sind wie folgt:

<code class="language-css">@keyframes slide-margin {
  100% {
    margin-left: 0;
  }
}</code>

Die Leistungsdaten, die ich aus dieser Animation erhalte, lautet wie folgt:

Bildrate -Visualisierung sieht ein bisschen uneben aus, mit einer durchschnittlichen Bildrate von 44,82 fps, was etwas niedrig ist.

Achten Sie auch auf alle Layout- und Zeichnungsvorgänge, die während des Animationsprozesses auftreten. Dies sind die kostspieligen Aktionen, die ein Browser auf seinem Hauptfaden ausführt, was die Leistung negativ beeinflusst.

Klicken Sie schließlich, wenn Sie auf das Inspektor -Tool zugreifen, auf den Abschnitt Animations und dann über den Animationsnamen schweben, ein Informationsfeld wird mit allen relevanten Daten zur aktuellen Animation angezeigt. Wenn Ihre Animation optimiert ist, wird eine Meldung, die die Tatsache erklärt, angezeigt. In diesem Fall keine Nachricht:

Jetzt werde ich meinen Code ändern und eine neue Aufzeichnung durchführen, da der Browser diesen @keyframes Block verwendet, um CSS translate3d() Eigenschaften zu animieren:

<code class="language-css">@keyframes slide-three-d {
  100% {
    transform: translate3d(0, 0, 0);
  }
}</code>

Dies ist das Bild, das in Leistung aufgezeichnet wurde:

Die Bildrate ist jetzt höher (56,83 fps), und der Wasserfallfluss zeigt keine kostspieligen Layout- und Zeichenvorgänge.

Wenn Sie die Registerkarte "Inspektor" der Entwickler -Tools öffnen, auf das "Animations" -Panel zugreifen und über den Animationsnamen schweben, sehen Sie so etwas wie folgt:

Das mit dem Animationsnamen zugeordnete Info -Feld zeigt an, dass alle Animationen optimiert sind. Dies ist eine gute Nachricht für Ihre Website -Besucher.

nur opacity, transforms und filters

von CSS animieren

Sie haben diesen Vorschlag vielleicht schon einmal gehört, aber für den Fall, dass es sich lohnt, wieder darüber zu sprechen: Wenn die Animation reibungslos ausgeführt werden soll, werden Sie nur Opazität, Transformationen und Filter für CSS (Filter) haben, um die Animation festzulegen Effekte. Wenn Sie alles andere animieren, können Sie den Browser unter Druck setzen und ihn in kürzester Zeit kostspielige Aufgaben erzwingen, was normalerweise nicht die besten Ergebnisse erzielt.

Wie die Leistungstools im Browser bewiesen haben, sind wiederholte Layout- und Zeichnungsvorgänge nicht Ihre Freunde.

Jeder Browser behandelt jedoch die CSS -Eigenschaften leicht unterschiedlich. Wenn Sie wissen möchten, welcher Browser Veröffentlichungs- und Zeichnungsvorgänge auslöst, für welche Eigenschaften (insbesondere bei der Aktualisierung der Werte dieser Eigenschaften, die an Webanimationen beteiligt sind), besuchen Sie CSS -Trigger.

Um die Animationsleistung zu gewährleisten, besteht ein beliebter Ansatz darin, den Browser zu zwingen, einige Eigenschaftenänderungen an der GPU (Grafikverarbeitungseinheit) zu übergeben, die einen Teil des Drucks auf den Hauptfaden des Browsers entlastet und die Hardwarebeschleunigung nutzt. Sie können das Attribut will-change css oder die translateZ(0) und translate3d(0,0,0) -Techniken verwenden, um es zu erreichen. Alle diese Tipps funktionieren, aber wenn Sie überbeanspruchte, können Sie tatsächlich das Ergebnis erhalten, das Sie vermeiden möchten, d. H. Animationsstottern.

Ich beabsichtige nicht, die Hardware -Beschleunigung für die Leistung von Webanimationen ausführlich zu machen. Wenn Sie jedoch tiefer graben möchten, lesen Sie die unten aufgeführten Ressourcen.

Ressourcen

• Hochleistungsanimationen von Paul Lewis und Paul Irish
• CSS -Animationen und Übergänge Leistung: In den Browser von Max Vujovic
schauen
• Animationen und Leistung von Paul Lewis und Sam Thorogood
• Halten Sie sich nur an die Eigenschaften von Komponisten und verwalten Sie die Schichtzahl von Paul Lewis
• Tricks für GPU -komponierte CSS von Sara Soueidan
• Eine Einführung in die CSS-Wille von Nick SALLOUM
• Animation CSS -Eigenschaften durch mdn
animieren

FAQs über CSS -Animationsleistung (FAQs)

Was sind die Schlüsselfaktoren, die die Leistung von CSS -Animationen beeinflussen?

Die Leistung von CSS -Animationen wird von einer Vielzahl von Faktoren beeinflusst. Die Komplexität der Animation, die Anzahl der animierten Elemente und die animierten Attribute funktionieren alle. Animationseigenschaften wie transform und opacity neigt dazu, besser zu funktionieren, da sie keine Veröffentlichung oder Zeichenvorgänge auslösen. Animationseigenschaften wie width, height oder margin können jedoch zu Layout -Offsets und -Reunen führen, was die Animation verlangsamt. Darüber hinaus wirkt sich die Hardware des Geräts und die Rendering -Engine des Browsers auch auf die Leistung der CSS -Animation aus.

Wie messen Sie die Leistung der CSS -Animation?

Sie können Browser -Entwickler -Tools verwenden, um die Leistung von CSS -Animationen zu messen. In Chrome können Sie beispielsweise die Registerkarte Performance verwenden, um die Laufzeit Ihrer Animation aufzuzeichnen und zu analysieren. Dieses Tool bietet einen detaillierten Zeitverbrauch im Animationslebenszyklus, damit Sie alle Leistungs Engpässe identifizieren können.

Was ist die ideale Bildrate für glatte CSS -Animationen?

Die ideale Bildrate für glatte Animation beträgt 60 Bilder pro Sekunde (FPS). Dies liegt daran, dass die meisten Geräte den Bildschirm 60 Mal pro Sekunde aktualisieren. Um reibungslose Animationen zu erstellen, sollten Sie die Animation alle 16,67 Millisekunden (1 Sekunde/60) ansprechen, was 60 fps entspricht.

Wie optimieren Sie die CSS -Animation für eine bessere Leistung?

Es gibt verschiedene Strategien, um CSS -Animationen für eine bessere Leistung zu optimieren. Ein allgemeiner Ansatz ist die Animationseigenschaften, die keine Posting- oder Zeichnen von Operationen wie transform und opacity auslösen. Darüber hinaus kann die Reduzierung der Anzahl der animierten Elemente und vereinfachte Animationen auch die Leistung verbessern. Die Verwendung des will-change -attributs kann dem Browser auch helfen, die Animation zu optimieren, indem sie nach Eigenschaften animiert werden.

Was ist der Unterschied zwischen CSS -Animation und JavaScript -Animation in Bezug auf die Leistung?

CSS -Animationen werden normalerweise besser als JavaScript -Animationen abschneiden. Dies liegt daran, dass die CSS -Animation auf der Rendering -Engine des Browsers ausgeführt wird und vom Haupt -JavaScript -Thread getrennt ist. Dies bedeutet, dass CSS -Animationen auch dann reibungslos ausgeführt werden können, wenn JavaScript -Threads besetzt sind. JavaScript -Animationen bieten jedoch mehr Kontrolle und Flexibilität, was für komplexe Animationen von Vorteil sein kann.

Wie wirkt sich die Hardwarebeschleunigung auf die CSS -Animationsleistung aus?

Hardware -Beschleunigung kann die Leistung von CSS -Animationen erheblich verbessern. Wenn die Hardwarebeschleunigung aktiviert ist, lädt der Browser einige Rendering -Aufgaben in die GPU des Geräts aus und befreien die CPU, um andere Aufgaben zu erledigen. Dies kann zu glatteren Animationen führen, insbesondere in komplexen Animationen oder Animationen, die eine große Anzahl von Elementen betreffen.

requestAnimationFrame Welche Rolle spielt die Funktion in der Animationsleistung?

Die Funktion

requestAnimationFrame ist eine JavaScript -Methode, die effizientere Animationen ermöglicht, indem die angegebene Funktion vor dem nächsten Repaint aufgerufen wird. Dies bedeutet, dass Animationen mit der Aktualisierungsrate des Geräts synchronisiert werden können, was zu glatteren Animationen führt. Der Browser kann auch Animationen optimieren, die CPU -Nutzung reduzieren und die Leistung verbessern.

Wie kann ich das Leistungspanel von Devtools verwenden, um die CSS -Animationsleistung zu verbessern?

Das Performance -Panel in Devtools bietet einen detaillierten Zeitverbrauch im Lebenszyklus an der Animation. Durch die Analyse dieser Daten können Sie alle Leistungs Engpässe identifizieren und Animationen entsprechend optimieren. Wenn beispielsweise viel Zeit für das Zeichnen aufgewendet wird, möchten Sie möglicherweise Eigenschaften berücksichtigen, dass Animationen den Zeichenvorgang nicht auslösen.

Wie wirkt sich das Layout -Jitter auf die CSS -Animationsleistung aus?

Layout Jitter bezieht sich auf die Situation, in der der Browser aufgrund von Änderungen im DOM wiederholt Layoutinformationen berechnen muss. Dies kann die Leistung von CSS -Animationen ernsthaft beeinflussen, wodurch die Animation langsam ausgeführt oder stottert wird. Um Layout -Jitter zu vermeiden, versuchen Sie, DOM -Lesen und Schreiben von Animationen zu vermeiden, um die Eigenschaften des Verlagsvorgangs auszulösen.

Wie kann man CSS will-change Attribut verwenden, um die Animationsleistung zu verbessern?

Mit

will-change können Sie den Browser vor den Eigenschaften, die Sie für die Animation planen, informieren. Auf diese Weise kann der Browser die erforderlichen Optimierungen vor Beginn der Animation durchführen, was zu glatteren Animationen führen kann. Das will-change -attribut sollte jedoch mit Vorsicht verwendet werden, da der Browser zu überbeanspruchter Verbrauch mehr Ressourcen und die Leistung negativ beeinflusst.

(Bitte beachten Sie, dass alle oben genannten Links durch tatsächliche Links ersetzt werden müssen)