Image Decode Zeiten von Chrome Timeline Dev Tool

Question

Ich baue eine Parallax Scrolling-Website (nicht wir alle), die unter anderem ein Bild zeigt, wie der Benutzer scrollt.

Ich habe die "Enthüllung" gemacht, indem ich das Bild in den Hintergrund gestellt habe und ein festes gefülltes div an die Spitze gesetzt habe. Ich animiere dann dieses div von 100% Höhe zu 0% Höhe basierend auf der Scroll-Position und enthüllt so das Hintergrundbild.

Ich mache diese Art von Sache mehrmals und leider werde ich langsam.

Mit der eingebauten Timeline-Funktion von Chrome kann ich sehen, dass der größte Teil dieser Verlangsamung von Bild-Decodes herrührt. Für die obige Enthüllung wird das Bild jedes Bild neu dekodiert, was 22 ms pro Bild pro Bild erfordert.

Weiß jemand, wann der Browser Image Decode machen muss und wann nicht? Es scheint mir offensichtlich, dass es nötig wäre, wenn ich das Bild verkleinern würde, aber nicht, dass es nötig wäre, wenn ich das Bild nur halb bedecken würde?

Danke für Ihre Hilfe.

Answer 1

Wie animieren Sie die Immobilie? Ich denke, dass Sie viele Alternativen haben können, um nur die Höhe zu animieren (was eine Art der Größenänderung des Containers ist).

Vielleicht ist es weniger intensiv, das Hintergrundbild einfach mit einem anderen Element zu "schneiden". Ich habe einen Thread über StackOverflow mit einigen Vorschlägen gefunden. Wenn Sie mit Javascript animieren, sind leider Pseudo-Elemente keine Option ...

Clip/Crop background-image with CSS

Answer 2

ich auch viel mit diesem Problem gekämpft haben. Bis jetzt habe ich nichts Konkretes gefunden und meine vorgeschlagene Lösung scheint nicht in ALLEN Fällen zu funktionieren und ich konnte nicht herausfinden warum.

Wie dem auch sei ...

Es scheint, dass, wenn Sie ein festes Element über die Oberseite eines Bildes animieren, Chrom eine Umkodierung des Bildes zwingt.

Es gibt zwei Dinge, die ich ausprobiert habe und zum größten Teil waren sie erfolgreich.

1. Wenn Sie -webkit-transform : translate3d(0,0,0) zum Verkleidungselement hinzufügen, sollten Sie finden die meisten, wenn nicht alle das Bild verschwinden decodiert.

2. Wenn das Hinzufügen des obigen CSS zum Covering-Element nicht hilft, versuchen Sie stattdessen, es dem Image hinzuzufügen, oder versuchen Sie, es zu beiden Elementen hinzuzufügen.

Mein Verständnis ist, dass die 3D-CSS-Eigenschaft mit dem Bild in seine eigene Verbundschicht schieben, die durch die GPU im Cache gespeichert und gehandhabt wird, anstatt der Browser-Software-Renderer.

90% der Zeit habe ich eine der oben genannten Kombinationen erfolgreich gefunden. Ich hoffe, es hilft.