Langsame Rasterung in Dev Tools
Ich optimiere eine Seite mit einem ziemlich einfachen Parallax Scrolling. Die animierten Elemente befinden sich auf separaten Ebenen ( backface-visibility:hidden ) und die Scripting- und Rendering-Schritte scheinen ziemlich schnell zu sein. Ich sehe jedoch viel Zeit für das Malen:
Die tatsächliche Zeichnung ist in Ordnung, aber diese riesigen hohlen grünen Balken repräsentieren die Rasterisierung im separaten Compositor-Thread.
Was mache ich, um das zu verursachen und wie kann ich es verbessern?
1 Antwort
Okay, ich kann die hohlen Stäbe wiederholen.
Sie geschehen auf dem Compositor-Thread, deshalb machen wir sie hohl. Sie können es deutlicher sehen, wenn Sie zum Flammendiagramm springen:
Wenn Sie dann die Zeitleiste mit dem Kontrollkästchen Paint markiert haben, können Sie genau sehen, was sich in den einzelnen Farben befand.
Und wir können dann mit dem Schieberegler eingrenzen, welche Zeichenaufrufe der teuerste Teil dieser großen Farben sind:
(sieht aus wie ein großer Ausschnitt und dann die Bitmap-Zeichnung)
Aber wenn man sich das Ganze ansieht, scheint es, dass man die Welt in jedem Rahmen neu streicht.
Vielleicht möchten Sie sich ansehen, was in jedem Frame passiert ... besonders zu Ihren Layern:
JEDOCH.
Nach alldem scheint es, dass Sie Ihre Probleme mit der Animation transform:translate() anstelle von left / top lösen können. Ich würde auch empfehlen, will-change:transform diesen Elementen hinzuzufügen. Dadurch kann der Browser Objekte verschieben, ohne neu zu streichen, und Sie sollten nicht für jeden Frame neu aufsetzen müssen.
muss gelesen werden:
Prost
Tags und Links javascript frontend performance google-chrome-devtools