Optimierung der CSS-Animationsleistung

1. Verwenden Sie CSS, JQuery, Canvas, um Animationen zu erstellen

1. Canvas

Vorteile: gute Leistung, leistungsstark, unterstützt die meisten Browser (außer IE6, IE7, IE8) können die gezeichneten Grafiken direkt als .png- oder .jpg-Grafiken gespeichert werden

Nachteile: Bei Verwendung von HTML können Grafiken nur über Skripte gezeichnet werden und es gibt keine API für Animationen ( basierend auf Ereignissen und Timer-Updates); da der programmgesteuert auf der Leinwand angezeigte Text tatsächlich eine Bitmap ist, ignorieren Suchcrawler den Text vollständig. Auch Textinhalte werden von Screenreadern nicht erkannt.

2. CSS3

Vorteile: einfach und vom Inhalt getrennt, CSS-Animation löst kein Layout und keine Farbe aus (Änderung dieser Eigenschaften löst kein Layout und keine Farbe aus: Sichtbarkeit der Rückseite, Deckkraft, perspective , perspective-origin, transform);

Nachteile: Es gibt Probleme mit der Browserkompatibilität, bei Android-Telefonen kann es zum Einfrieren kommen, sie werden durch die Satz-Engine eingeschränkt und hängen eng mit der DOM-Struktur der gesamten Seite zusammen.

3. JQuery

Vorteile: Keine Kompatibilitätsprobleme

Nachteile: Neulackierung und Neuzusammenstellung sind für jeden Frame erforderlich (sehr zeitaufwändig);

Zusammenfassung : In Bezug auf mobile Animationseffekte ist die Verwendung von CSS3-Animationen viel effizienter als die JQuery-Animation. Besonders deutlich wird die Leistung auf Android-Handys! Daher priorisieren mobile Animationen CSS3-Animationen, und JQuery kann nur zur einfachen Verarbeitung der Anwendungslogik verwendet werden. CSS3-Animationen sind eine allgemeine Lösung zum Hinzufügen von Spezialeffekten zum Inhaltslayout. Bei mobilen Browsern mit schlechter Leistung ist sie jedoch wahrscheinlich durch die Layoutleistung eingeschränkt und kann nicht den gewünschten Effekt erzielen. Für bestimmte Szenarien, die Leistung erfordern, wie z. B. Spiele, wird Canvas erheblich verbessert.

(Empfohlenes Tutorial: CSS-Einführungs-Tutorial)

2. CSS3 friert auf dem mobilen Endgerät ein

Mit CSS3 erstellte Animation läuft auf iOS 66, aber Manchmal kommt es auf Android zu Verzögerungen. Genauso gut können Sie anhand der folgenden Punkte nach Problemen suchen.

a. Ob es das Layout verursacht

Wenn ja, machen Sie die animierten Elemente so weit wie möglich absolut oder fest, um Auswirkungen auf den Dokumentbaum zu vermeiden und den Reflow zu reduzieren.

b. Ob die Hardwarebeschleunigung aktiviert ist

„CSS3-Animation wird verwendet“ und „Hardwarebeschleunigung ist aktiviert“ sind zwei verschiedene Dinge, obwohl Ersteres Letzteres verursachen kann.
Es gibt ein magisches Allheilmittel zum Aktivieren der Hardwarebeschleunigung im Webkit: opacity: 1; oder -webkit-backface-visibility: versteckt;.

c. Ob es teure Attribute hat (CSS-Schatten, Farbverläufe, Hintergrundanhang: fest usw.)

Wenn ja, sind auch Bilder eine Option. Dies kann als eine Optimierung angesehen werden, die Raum gegen Zeit tauscht.

d. Bereich neu streichen

Wenn ja, müssen Sie den Animationsbereich verkleinern. Die Optimierung dieses Schritts ist begrenzt;

e. Versuchen Sie, die Animation zu verwenden und vermeiden Sie die Verwendung von Höhe, Breite, Rand, Abstand usw.;

PS: Mit der Transformation muss der Browser die Bitmap dieses Elements nur einmal generieren und sie beim Start der Animation zur Verarbeitung an die GPU senden. Danach muss der Browser keine Layout-, Zeichnungs- und Übermittlungsvorgänge für Bitmaps mehr durchführen. Dadurch kann der Browser die Fähigkeiten der GPU voll ausnutzen, um Bitmaps schnell an verschiedenen Positionen zu zeichnen, Drehungen oder Skalierungen durchzuführen. Kurz gesagt, die Transformationsanimation wird von der GPU gesteuert, unterstützt Hardwarebeschleunigung und erfordert kein Software-Rendering

3 Während des Animationsprozesses tritt ein Flackern auf (tritt normalerweise zu Beginn der Animation auf)

Lösung:

.cube {
 
   -webkit-backface-visibility: hidden;
 
   -moz-backface-visibility: hidden;
 
   -ms-backface-visibility: hidden;
 
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
 
   -moz-perspective: 1000;
 
   -ms-perspective: 1000;
 
   perspective: 1000;
 
   /* Other transform properties here */
 
}

In Webkit-basierten Browsern ist eine weitere effektive Methode:

.cube {
 
   -webkit-transform: translate3d(0, 0, 0);
 
   -moz-transform: translate3d(0, 0, 0);
 
   -ms-transform: translate3d(0, 0, 0);
 
   transform: translate3d(0, 0, 0);
 
  /* Other transform properties here */
 
}

Empfohlene verwandte Video-Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonOptimierung der CSS-Animationsleistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!