it-swarm.com.de

Was ist der Grund für diesen übermäßigen Zyklus "Composite-Layer", "Stil neu berechnen" und "Ebenenbaum aktualisieren"?

Ich bin sehr fasziniert von der übermäßigen Anzahl von "zusammengesetzten Ebenen", "Stil neu berechnen" und dann "Ebenenbaum aktualisieren" -Ereignisse in einer unserer Webapps. Ich frage mich, was sie hier verursacht. 

Wenn Sie Ihr Chrome auf einen unserer sich schnell bewegenden Streams richten, sagen Sie https://choir.io/player/beachmonks/github , und schalten Sie Ihren "FPS-Meter" ein. Sie können feststellen, dass die App dies erreichen kann 60fps meistens wenn wir oben sind.

Sobald ich jedoch ein paar Nachrichten nach unten scrolle und den Bildschirm belassen lasse, sinkt die FPS-Rate drastisch auf etwa 10 oder sogar darunter. Was der Code hier tut, ist, dass er jede eingehende Nachricht rendert, sie nach oben vorschiebt und in der Liste nach oben nach Npx blättert. Dies ist die Höhe der neuen Nachricht, um die Position des Ansichtsfensters intakt zu halten. 

(Ich verstehe, dass scrollTop den Bildschirm ungültig macht, aber ich habe die Operationen sorgfältig angeordnet, um Layout-Thrashings zu vermeiden. Ich bin mir auch der synchronen Neulackierung bewusst, die jede Sekunde geschieht. Sie wird durch die jquery.sparkline verursacht, ist aber für diese Diskussion nicht relevant.) 

Hier ist, was ich sehe, als ich versuchte, es zu profilieren. low fps profiling result

Was könnte Ihrer Meinung nach die große Anzahl von Ebenenoperationen verursachen?

25
Alex Dong

Die CSS-Eigenschaft will-change: transform für alle Elemente, für die ein Repaint erforderlich ist, hat das Problem mit zu vielen Composite-Layern für mich gelöst.

4
Anoian

Ich hatte das gleiche Problem. Ich habe es behoben, indem ich die Größe der Bilder verkleinerte.

In der scrollbaren Liste befanden sich einige Miniaturansichten. Die Größe jedes Piktogramms war 3000x1800, wurde jedoch von CSS auf 62x44 geändert. Durch die Verwendung von 62x44-Bildern wurde der Zeitaufwand für "Verbundebenen" reduziert.

2
Charles