Langsame Rasterung in Dev Tools

Question

Ich optimiere eine Seite mit einigen ziemlich einfachen Parallax Scrolling. Die animierten Elemente sind auf separaten Ebenen (backface-visibility:hidden) und die Scripting und Rendering-Schritte scheinen ziemlich schnell. Aber da sehe ich eine Menge Zeit auf der Malerei verbrachte:

Die eigentliche Zeichnung ist in Ordnung, aber die riesigen hollow green bars repräsentiert Rasterung in den separaten Compositor Gewinden.

Here's the link

Was soll ich das auch nicht tun und wie kann ich es verbessern?

Answer 1

Okay, ich kann die hohlen Bars wiederholen.

Sie basieren auf dem Compositor Faden passiert, das ist, warum wir sie hohl tun. Sie können sehen, es deutlicher auf die Flamme Chart schnippen:

Dann, wenn Sie die Timeline mit dem aufgezeichnet Checkbox Farbe überprüft Sie genau sehen können, was in jeder Farbe war.

Und wir können dann den Regler verwenden zu verengen, die Anrufe der teuerste Teil dieser großen Farben sind zeichnen:

(sieht aus wie ein großes Cliprect und dann die Bitmap zeichnen)

Aber in aggregierten .. scheint es, dass Sie die Welt in jedem Rahmen neu streichen.

Sie könnten wollen, betrachten, was in jedem Rahmen geschieht ... vor allem auf Ihre Schichten:

JEDOCH.

Nach all dem scheint es, Sie können Ihre Probleme mit der Animation transform:translate() statt left/top lösen. Ich würde auch empfehlen, will-change:transform zu diesen Punkten 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 lautet:

• Animations and Performance - web fundamentals
• High Performance Animations - html5rocks

Prost