In den letzten Jahren haben wir oft von der Beschleunigung der Hardware geh?rt und wie es dazu beitr?gt, die Animation auf Webseiten zu verbessern und sie selbst auf mobilen Browsern sch?n und reibungslos zu machen. Aber ich denke, viele weniger erfahrene Entwickler wissen nicht, wie Hardware -Beschleunigung funktioniert und wie wir sie richtig verwenden k?nnen, um unsere Animationen zum Leuchten zu bringen.

Der Begriff selbst klingt nach etwas überm??ig kompliziertem, nahezu h?herer Mathematik. In diesem Artikel werde ich dieses Thema Licht beleuchten und zeigen, wie diese Technik in Ihren Front-End-Projekten verwendet werden kann.

Key Takeaways

• Hardware -Beschleunigung kann die Qualit?t von CSS -Animationen erheblich verbessern und sie reibungsloser und effizienter machen, insbesondere in mobilen Browsern. Dies wird erreicht, indem der Rendering -Prozess in die GPU (Grafikverarbeitungseinheit) abgeladen wird, die für solche Aufgaben besser ausgestattet ist.
• CSS-Transformationen sind GPU-freundliche Eigenschaften, die verwendet werden k?nnen, um teure Neulackiervorg?nge zu vermeiden. Der ?Transformation Hack“ kann auch verwendet werden, um ein Element in der GPU zu erzwingen, noch bevor die Animation beginnt, und somit die Beschleunigung der Hardware ausl?st.
• Die Verwendung der Hardwarebeschleunigung sollte mit Vorsicht erfolgen, da dies zu Speicherproblemen führen kann, insbesondere auf mobilen Ger?ten. Es kann auch die Schrift gegen Aliasing durch unterschiedliche Rendering-Mechanismen der GPU und CPU beeinflussen.
• Die Eigenschaft "Willenswechsel" wurde eingeführt, um den Browser zu informieren, welcher Eigenschaft sich ?ndern wird, damit der Browser entsprechende Optimierungen im Voraus vornehmen kann. Allerdings unterstützen nicht alle Browser diese Eigenschaft.

Warum sollte es mich interessieren?

Schauen wir uns ein einfaches Animationsbeispiel an, das mehrere übereinander gestapelte B?lle enth?lt (dh auf der Z-Achse, also sieht es aus wie ein Ball). Das Ziel ist es, diese Gruppe von B?llen mit Animation zu bewegen. Der einfachste Weg, dies zu tun, besteht darin, die linken und oberen Eigenschaften anzupassen. Wir k?nnten dies mit JavaScript tun, aber stattdessen werden wir CSS -Animationen verwenden. Bitte beachten Sie, dass ich Anbieterpr?fixe ausschlie?e, aber Sie sollten so etwas wie Autoprefixer verwenden, um die vollst?ndige Kompatibilit?t zu gew?hrleisten.

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

Hier ist eine Live -Demo, die eine Taste verwendet, um die Animation mit JavaScript zu initiieren:

Siehe den Stift animierende überlappende B?lle mit oberen/linken Eigenschaften von SitePoint (@sinepoint) auf CodePen.

Nachdem Sie auf die Schaltfl?che "Animation starten" geklickt haben, werden Sie feststellen, dass die Animation auch bei einem Desktop -Browser nicht sehr reibungslos aussieht. Wenn Sie die Animation auf Ihrem mobilen Ger?t testen, werden Sie feststellen, dass sie weit entfernt von 60 fps ist. Um dies zu beheben, k?nnen wir die CSS -Transformation mit der Funktion translate () verwenden, anstatt die oberen und linken Werte zu animieren.

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>transform: translate(0, 0);
</span>  <span>}
</span>
  <span>25% {
</span>    <span>transform: translate(200px, 0);
</span>  <span>}
</span>
  <span>50% {
</span>    <span>transform: translate(200px, 200px);
</span>  <span>}
</span>
  <span>75% {
</span>    <span>transform: translate(0, 200px);
</span>  <span>}
</span><span>}</span>

Probieren Sie den obigen Code in der folgenden Demo aus:

Siehe den Stift animiert überlappende B?lle mit CSS -Transformationen mit SitePoint (@sinepoint) auf CodePen.

Jetzt ist die Animation sch?n und glatt. Gro?artig! Warum hat diese geholfen? Nun, CSS -Transformationen verursachen keine Reponten, im Gegensatz zu Animationen mit den linken und den oberen Eigenschaften. Schauen wir uns das Timeline -Panel in Chromes Devtools w?hrend der Animationsausführung an:

Im linken und oberen Beispiel k?nnen wir bei jedem Animationsschritt grüne Balken sehen. Dies ist eine teure Neulackierungsoperation. Die Animations -Bildrate betr?gt weniger als 60 fps, was wir immer darauf abzielen, die Animation glatt zu machen.

Schauen Sie sich nun die Zeitleiste im Fall von CSS -Transformationen an:

Wie Sie sehen, gibt es w?hrend der Animation keine grünen Balken.

Eine weitere Funktion, die in Chrome's Devtools zur Verfolgung des Neulackierungsprozesses verfügbar ist, ist "Lackblenden aktivieren". Sie k?nnen diese Option finden, indem Sie die Devtools ?ffnen, die ESC -Taste treffen und dann die Registerkarte "Rendering" ausw?hlen. Wenn diese Funktion eingeschaltet ist, werden grüne Kisten (d. H. Lack -Rechtecke) um neu gestrichene Bereiche angezeigt. Im linken und oberen Beispiel haben die B?lle eine grüne Box für den gesamten Animationsprozess, der die Repainten anzeigt.

Andererseits wird im CSS -Transformationsbeispiel das Lack -Rechteck nur auf den ersten und letzten Animationsrahmen angezeigt.

Wie genau transformiert die Animation die Animation ohne Repainten? Die grundlegende Antwort ist, dass CSS -Transformationen direkt im GPU -Pear auftreten, in dem Hardware -Beschleunigung verwendet wird, wodurch das Rendern der Software vermieden wird. Schauen wir uns dies genauer an.

Wie Hardware Beschleunigung funktioniert

Wenn der Browser das Markup einer Seite erh?lt, analysiert er ihn, um den Dom -Baum zu erstellen. Der DOM -Baum und das CSS erm?glichen es dem Browser, den Renderbaum zu bauen. Der Renderbaum besteht aus Renderobjekten - den Elementen, die auf der Seite gerendert werden sollen. Jedes Renderobjekt wird einer grafischen Schicht zugeordnet. Jede Schicht wird als Textur in die GPU hochgeladen. Der Trick hier ist, dass die Schicht wie im Fall von 3D -Grafiken in der GPU ohne Neulackierung transformiert werden kann. Diese Transformationen werden durch den separaten Kompositionsverfahren vorgenommen. Weitere Informationen zur Komposition in Chrome finden Sie hier.

In unserem Beispiel erzeugt die CSS -Transformation eine neue zusammengesetzte Schicht, die direkt in der GPU transformiert werden kann. Die Devtools von Chrome erm?glichen das Anzeigen von Verbundschichten mithilfe der Option "Layer Borders". Jede zusammengesetzte Schicht hat einen orangefarbenen Rand.

Unsere B?lle mit der CSS -Transformation haben orangefarbene Grenzen und werden in getrennte Verbundschichten bewegt:

Zu diesem Zeitpunkt k?nnten Sie fragen: Wann erstellt ein Browser eine separate zusammengesetzte Ebene?

es geschieht in den folgenden F?llen:

• für 3D- oder Perspektiven -CSS -Transformationen (in unserem Beispiel)
• für
• Bei Verwendung von CSS -Filtern
• für ein Element, das ein anderes Element überlappt, das in eine zusammengesetzte Schicht extrahiert wurde (z. B. unter Verwendung von Z-Index)

Sie k?nnten denken: ?Halten Sie sich fest. In diesem Beispiel wurde 2D -übersetzung verwendet, nicht 3D -Transformationen “. Und du hast recht. Deshalb gibt es zwei zus?tzliche Neulackiervorg?nge - zu Beginn und am Ende des Animationsprozesses in unserer Zeitleiste.

Der Unterschied zwischen den 3D- und 2D -Transformationen besteht darin, dass 3D -Transformationen den Browser im Voraus eine separate zusammengesetzte Schicht erzeugen, w?hrend 2D -Transformationen dies im laufenden Fliegen durchführen. Zu Beginn der Animation wird eine neue zusammengesetzte Ebene erstellt, und die Texturen werden in die GPU geladen, wodurch das Neulackieren initiiert wird. Dann wird die Animation vom Kompositor in der GPU durchgeführt. Wenn die Animation beendet ist, wird die zus?tzliche Verbundschicht entfernt, was zu einem weiteren Neulackiervorgang führt.

Renderingelemente in der GPU

Nicht alle CSS -Eigenschaften?nderungen an Elementen k?nnen direkt in der GPU behandelt werden. Nur die folgenden Eigenschaften werden unterstützt:

• Transformation
• Opazit?t
• filter

und so, um die beste Chance für eine reibungslose, qualitativ hochwertige Animation zu gew?hrleisten, sollten wir immer versuchen, diese GPU-freundlichen Eigenschaften zu verwenden.

ein Element erzwingen, in GPU

zu rendern

In bestimmten F?llen kann es erforderlich sein, ein Element in der GPU noch bevor die Animation begonnen hat. Dies hilft, die erste Neulackierungsoperation zu vermeiden, die durch die neue Schichtsch?pfung verursacht wird. Um dies zu erreichen, kann der sogenannte ?Transformation Hack“ nützlich sein.

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

Was dies tut, ist, dass der Browser wissen, dass wir eine 3D -Transformation durchführen m?chten. Dadurch erstellt der Browser eine separate Ebene und verschiebt das Element im Voraus an die GPU, wodurch die Beschleunigung der Hardware ausgel?st wird.

Diese Technik kann auch nützlich sein, wenn das Neuaufbau eines Elements aufgrund eines anderen Elements dahinter zu teuer ist. Kehren wir zum ersten Beispiel zurück und ?ndern Sie es leicht, damit er einen einzelnen Ball und einen Container mit einem Hintergrundbild enth?lt, das mit CSS -Filtern verschwommen ist. Der Ball ist mit den linken und den oberen Eigenschaften animiert.

Siehe den Stift, der einen Ball mit oberen/linken Eigenschaften von SitePoint (@sinepoint) auf CodePen animiert.

Wieder ist die Ballbewegung ruckartig. Dies geschieht, weil jede Neulackierungsbetrieb aufgrund des verschwommenen Hintergrunds zu stark kostet.

Lassen Sie uns nun den Transformationshack zum Container hinzufügen.

Siehe den Stift, der links/obere Eigenschaften mit Hardware -Beschleunigung von SitePoint (@sinepoint) auf CodePen animiert.

Das Ergebnis ist nicht schlecht und die Animation funktioniert gut. Warum? Denn jetzt wird der verschwommene Farbausgleichshintergrund in eine andere zusammengesetzte Ebene verschoben, und das Neulackieren des Balls bei jedem Animationsschritt ist billig.

Hardwarebeschleunigung mit Vorsicht

verwenden

Nichts kommt kostenlos. Es gibt einige Probleme im Zusammenhang mit der Beschleunigung der Hardware.

Speicher
Das wichtigste Problem h?ngt mit dem Ged?chtnis zusammen. Wenn Sie zu viele Texturen in die GPU geladen werden, k?nnen Speicherprobleme verursacht werden. Dies ist auf mobilen Ger?ten sehr wichtig und kann sogar einen mobilen Browser zum Absturz bringen. Beachten Sie die Konsequenzen und verwenden Sie die Hardware -Beschleunigung für jedes Element auf einer Seite nicht.

Schriftart
Das Rendern der GPU beeinflusst die Schrift gegen Aliasing. Dies geschieht, weil GPU und CPU unterschiedliche Rendering -Mechanismen haben. Selbst wenn Sie die Hardwarebeschleunigung am Ende einer Animation ausschalten, wird der Text w?hrend der Animation verwischt. In diesem Beitrag von Keith Clark k?nnen Sie mehr über Font -Rendering -Probleme lesen.

Die nahe Zukunft

Die Notwendigkeit, den ?Transformation Hack“ zu verwenden, um separate zusammengesetzte Schichten zu erstellen, ist mühsam. Browser sollten auf jeden Fall eine einfache M?glichkeit bieten, dies zu tun. Deshalb wurde die Willensmeldung vorgestellt. Mit dieser Funktion k?nnen Sie den Browser darüber informieren, welche Eigenschaft sich ?ndern wird, damit der Browser im Voraus entsprechende Optimierungen vornehmen kann. Hier ist ein Beispiel, das den Browser darüber informiert, dass die Transformationseigenschaft ge?ndert wird:

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

Leider unterstützen nicht alle Browser den Willen. In den folgenden Ressourcen erfahren Sie mehr über den Willenswechsel:

• Eine Einführung in die CSS-Willensmobilie von Nick Saloum
• Alles, was Sie über das CSS-Wille von Sara Soueidan wissen müssen.

Schlussfolgerung

zusammenfassen, was wir behandelt haben:

• Verwendung von GPU kann die Qualit?t Ihrer Animationen verbessern
• GPU-gerenderte Animationen sollten auf jedem Ger?t 60 fps sein
• GPU-freundliche CSS-Eigenschaften
verwenden
Verstehe, wie man ein Element zwingt, das in der GPU mit dem "Transformation Hack" gerendert wird.

Wenn Sie diese Techniken verwendet haben oder über ein Feedback verfügen, k?nnen Sie Ihre Kommentare gerne anbieten.

h?ufig gestellte Fragen zur Hardwarebeschleunigung und zur CSS -Animationen

Welche Rolle spielt die GPU in Hardware-Beschleunigungs-CSS-Animationen? Es ist verantwortlich für die Rendern von Grafiken und Bildverarbeitung. Wenn CSS-Animationen hardwarebeschleunigt sind, übernimmt die GPU die Aufgabe, die Animationen von der Central Processing Unit (CPU) zu rendern. Dies führt zu reibungsloseren, schnelleren und effizienteren Animationen, da die GPU speziell für die Behandlung solcher Aufgaben ausgelegt ist. von CSS -Animationen, indem einige der grafischen Verarbeitungsaufgaben von der CPU zur GPU abgeladen werden. Dies erm?glicht es der CPU, sich auf andere Aufgaben zu konzentrieren und so die Gesamtleistung der Website oder Anwendung zu verbessern. Darüber hinaus ist die GPU besser ausgestattet, um grafische Aufgaben zu erledigen, was zu glatteren und effizienteren Animationen führt. Kann die Leistung erheblich verbessern, es gibt potenzielle Nachteile. Eines der Hauptprobleme sind Kompatibilit?tsprobleme. Nicht alle Ger?te oder Browser unterstützen die Beschleunigung der Hardware, was zu inkonsistenten Benutzererlebnissen führen kann. Darüber hinaus kann eine überbeanspruchung der Hardwarebeschleunigung zu einem erh?hten Stromverbrauch führen. Dies kann ein Problem für mobile Ger?te sein. Kann durch die Verwendung der Eigenschaft "Transformation" in Ihrem CSS -Code erfolgen. Diese Eigenschaft l?st die GPU aus, die Darstellung der Animation zu übernehmen. Sie k?nnen beispielsweise 'Transform: TranslateZ (0)' oder 'Transform: Dreh (0DEG)' verwenden, um die Beschleunigung der Hardware zu erm?glichen. > CSS -Animationen, die komplexe grafische Aufgaben wie 3D -Transformationen, überg?nge und Keyframe -Animationen umfassen, k?nnen stark von der Beschleunigung der Hardware profitieren. Diese Aufgaben k?nnen ressourcenintensiv sein, wenn sie von der CPU behandelt werden, aber die GPU kann sie effizienter verarbeiten, was zu glatteren Animationen führt. ??> Um die Kompatibilit?t bei der Verwendung von CSS-Animationen mit Hardware-Beschleunigungen zu gew?hrleisten, ist es wichtig, Ihre Website oder Anwendung auf verschiedenen Ger?ten und Browsern zu testen. Sie k?nnen auch Fallbacks in Ihrem CSS -Code verwenden, um alternative Animationen für Ger?te oder Browser bereitzustellen, die Hardware -Beschleunigung nicht unterstützen.

Kann Hardware -Beschleunigung mit CSS -überg?ngen verwendet werden? Durch die Verwendung der Eigenschaft "Transformation" k?nnen Sie die GPU zum Rendern des übergangs ausl?sen, was zu einer glatteren und effizienteren Animation führt. W?hrend die Hardwarebeschleunigung die Leistung von CSS -Animationen verbessern kann, kann sie auch den Stromverbrauch erh?hen und m?glicherweise die Akkulaufzeit auf mobilen Ger?ten beeinflussen. Es ist wichtig, bei Verwendung der Hardwarebeschleunigung ein Gleichgewicht zwischen Leistung und Stromverbrauch zu erreichen.

Kann ich die Hardware -Beschleunigung für 2D -Animationen verwenden? Durch die Verwendung der Eigenschaft "Transformation" in Ihrem CSS -Code k?nnen Sie die GPU dazu ausl?sen, die Animation zu rendern, was zu einer glatteren und effizienteren Animation führt. >

Optimieren Sie Ihren CSS -Code für die Beschleunigung von Hardware für die Beschleunigung der Hardware, um die Eigenschaft "Transform" zu verwenden, um die GPU für das Rendern von Animationen auszul?sen. Es ist auch wichtig, die überbeanspruchung der Hardwarebeschleunigung zu vermeiden, da dies zu einem erh?hten Stromverbrauch führen kann. Darüber hinaus kann das Testen Ihrer Website oder Anwendung auf verschiedenen Ger?ten und Browsern dazu beitragen, die Kompatibilit?t zu gew?hrleisten.

Das obige ist der detaillierte Inhalt vonEine Einführung in die Hardwarebeschleunigung mit CSS -Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!