Wussten Sie, dass wir CSS verwenden können, um die Hardwarebeschleunigung im Browser zu aktivieren, damit die GPU (Graphics Processing Unit) funktioniert und so die Leistung verbessert wird?
Die meisten Computergrafikkarten unterstützen jetzt Hardwarebeschleunigung. Vor diesem Hintergrund können wir die Leistung der GPU nutzen, um die Leistung unserer Website oder Anwendung zu verbessern.
CSS-Animationen, -Transformationen und -Übergänge aktivieren nicht automatisch die GPU-Beschleunigung, sondern werden von der langsamen Software-Rendering-Engine des Browsers ausgeführt. Wie können wir also in den GPU-Modus wechseln? Viele Browser bieten bestimmte ausgelöste CSS-Regeln.
Jetzt unterstützen Chrome, Firefox, Safari, IE9+ und die neueste Version von Opera alle die Hardwarebeschleunigung, die aktiviert wird, wenn sie erkennen, dass bestimmte CSS-Regeln auf ein DOM-Element auf der Seite angewendet werden, insbesondere 3D-Transformation des charakteristischen Elements.
Zum Beispiel:
.cube
{
-webkit-transform:
translate3d(250px,250px,250px)
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5,0.5,0.5);
}Aber in manchen Fällen müssen wir keine 3D-Transformationseffekte auf Elemente anwenden, was sollen wir also tun? Zu diesem Zeitpunkt können wir den Browser mit einem kleinen Trick „austricksen“, um die Hardwarebeschleunigung zu aktivieren.
Auch wenn wir möglicherweise keine 3D-Transformationen auf Elemente anwenden möchten, können wir die 3D-Engine dennoch aktivieren. Beispielsweise können wir transform: TranslateZ(0); verwenden, um die Hardwarebeschleunigung zu aktivieren.
.cube
{
-webkit-transform:
translateZ(0);
-moz-transform:
translateZ(0);
-ms-transform:
translateZ(0);
-o-transform:
translateZ(0);
transform:
translateZ(0);
/*
Other transform properties here */}
Wenn wir CSS-Transformationen oder Animationen verwenden, kann die Seite flackern. Der folgende Code kann diese Situation beheben:
.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
.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 */
}eine weitere effektive Methode. Schüler, die CSS lernen müssen, achten bitte auf die chinesische PHP-Website CSS-Video-Tutorial kostenlos angeschaut werden!
Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um Beispielcode für die Hardwarebeschleunigung auf Desktops und Mobilgeräten zu aktivieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
