Was macht -webkit-transform: translate3d (0,0,0); genau tun? Auf den Körper auftragen?

was macht -webkit-transform: translate3d(0,0,0); genau Hat es irgendwelche Leistungsprobleme? Soll ich es nur auf den Körper oder einzelne Elemente anwenden? Es scheint die Scroll-Ereignisse drastisch zu verbessern.

Danke für die Lektion!

-webkit-transform: translate3d(0,0,0); Lässt einige Geräte ihre Hardwarebeschleunigung ausführen.

Eine gute Lektüre finden Sie hier

Native Anwendungen können auf die grafische Verarbeitungseinheit (GPU) des Geräts zugreifen, um Pixel zum Fliegen zu bringen. Webanwendungen hingegen werden im Kontext des Browsers ausgeführt, sodass die Software den größten Teil (wenn nicht den gesamten) Rendering-Vorgang ausführt, was zu weniger Leistung bei Übergängen führt. Das Web hat jedoch aufgeholt, und die meisten Browser-Anbieter bieten jetzt eine grafische Hardwarebeschleunigung mithilfe bestimmter CSS-Regeln.

Durch -webkit-transform: translate3d(0,0,0);die Verwendung wird die GPU für die CSS-Übergänge aktiviert, wodurch sie flüssiger werden (höhere FPS).

Hinweis: translate3d(0,0,0) Tut nichts in Bezug auf das, was Sie sehen. Es bewegt das Objekt um 0 Pixel in der x-, y- und z-Achse. Es ist nur eine Technik, um die Hardwarebeschleunigung zu erzwingen.

Eine Alternative ist -webkit-transform: translateZ(0). Und wenn Chrome und Safari aufgrund von Transformationen flackern, versuchen Sie es -webkit-backface-visibility: hiddenund -webkit-perspective: 1000. Weitere Informationen finden Sie in diesem Artikel .

Ich habe hier keine Antwort gesehen, die dies erklärt. Viele Transformationen können durchgeführt werden, indem jede der divOptionen und ihre Optionen mithilfe eines komplizierten Validierungssatzes berechnet werden . Wenn Sie jedoch eine 3D-Funktion verwenden, werden alle 2D-Elemente, die Sie haben, als 3D-Elemente betrachtet, und wir können diese Elemente im laufenden Betrieb einer Matrixtransformation unterziehen. Die meisten Elemente sind jedoch "technisch" bereits hardwarebeschleunigt, da sie alle die GPU verwenden. Die 3D-Transformationen funktionieren jedoch direkt mit den zwischengespeicherten Versionen jedes dieser 2D-Renderings (oder zwischengespeicherten Versionen von div) und verwenden direkt eine Matrixtransformation (die vektorisierte und parallelisierte FP-Mathematik sind).

Es ist wichtig zu beachten, dass 3D-Transformationen NUR Änderungen an Features in einem zwischengespeicherten 2D-Div vornehmen (mit anderen Worten, das Div ist bereits ein gerendertes Bild). Dinge wie das Ändern der Randbreite und -farbe sind also vage nicht mehr "3D". Wenn Sie darüber nachdenken, müssen Sie zum Ändern der Rahmenbreiten das divWeil erneut rendern und erneut zwischenspeichern, damit die 3D-Transformationen angewendet werden können.

Hoffe das macht Sinn und lass es mich wissen, wenn du weitere Fragen hast.

Um Ihre Frage zu beantworten, translate3d: 0x 0y 0zwürden Sie nichts tun, da die Transformationen direkt auf die Textur wirken, die durch Ausführen der Eckpunkte von divin den GPU-Shader gebildet wird. Diese Shader-Ressource wird jetzt zwischengespeichert und beim Zeichnen auf den Frame-Puffer wird eine Matrix angewendet. Im Grunde genommen hat das keinen Vorteil.

So funktioniert der Browser intern.

Schritt 1: Eingabe analysieren

<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>

Schritt 2: Verbundschicht entwickeln

CompositeLayer compLayer = new CompositeLayer();
compLayer.setPosition(0, 0, 0, 0);
compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code
Pipeline.add(compLayer, zIndex); // would be significantly more complex.

Schritt 3: Verbundschicht rendern

for (CompositeLayer compLayer : allCompositeLayers){

     // Create and set cacheTexture as active target
     Texture2D cacheTexture = new Texture2D();
     cacheTexture.setActive();

     // Draw to cachedTexture
     Pipeline.renderVertices(compLayer.getVertices());
     Pipeline.setTexture(compLayer.getBackground());
     Pipeline.drawIndexed(compLayer.getVertexCount());

     // Set the framebuffer as active target
     frameBuffer.setActive();

     // Render to framebuffer from texture and **applying transformMatrix**
     Pipeline.renderFromCache(cacheTexture, transformMatrix);
}

Es gibt einen Fehler beim Scrollen in MobileSafary (iOS 5), der dazu führt, dass Artefakte als Kopien von Eingabeelementen im Bildlaufcontainer angezeigt werden.

Die Verwendung von translate3d für jedes untergeordnete Element kann diesen seltsamen Fehler beheben. Hier ist ein Beispiel für CSS, das mir den Tag gerettet hat.

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}

Translate3D erzwingt eine Hardwarebeschleunigung. CSS-Animationen, -Transformationen und -Übergänge werden nicht automatisch GPU- beschleunigt, sondern von der langsameren Software-Rendering-Engine des Browsers ausgeführt. Um GPU zu verwenden, verwenden wir translate3d

Derzeit verfügen Browser wie Chrome, FireFox, Safari, IE9 + und die neueste Version von Opera über eine Hardwarebeschleunigung. Sie verwenden diese nur, wenn sie den Hinweis haben, dass ein DOM-Element davon profitieren würde.

Beachten Sie, dass dadurch ein Stapelkontext erstellt wird (plus die anderen Antworten), sodass sich dies möglicherweise auf das auswirkt, was Sie sehen, z. B. wenn etwas über einem Overlay angezeigt wird, wenn dies nicht beabsichtigt ist.