Minimieren "Zwangs Reflow"

TD; DRMinimieren "Zwangs Reflow"

Ich verbringe einige Zeit die Leistung unserer App-Tracking, die highcharts implementiert. Ich habe herausgefunden, dass einige Funktionen wie getBBox() oft "Forced Reflow" auslösen.

Wenn Sie diese Liste What forces layout/reflow betrachten, sind die Dinge, die einen Reflow auslösen, sehr lang.

Meine Frage:

Gibt es alternative Möglichkeiten für zumindest einige der genannten Eigenschaften (espacially offset/offset), die nicht über eine Reflow auslösen?

Quelle

2017-10-24 scipper

Wenn Sie in den meisten Fällen eine bessere Leistung beim Bearbeiten von DOM-Elementen erzielen möchten, sollten Sie sie in eine neue [Ebene] (https://www.html5rocks.com/de/tutorials/speed/layers/) aufteilen und verwenden nur die hardwarebeschleunigten Transformationen, die keinen Reflow der gesamten Seite auslösen. –

@Derek 朕會功夫 Sehr schöner Artikel. Ich habe versucht, ein teures Element auf eine neue Ebene zu verschieben, und es reduziert die Reflow-Vorkommen. Der Einfluss war nicht so groß, aber es ist ein Anfang. Vielen Dank! – scipper

Sie können zu Canvas-Diagrammen wechseln. – wOxxOm

Kennen Sie Dokumente wie Avoid forced synchronous layouts? Die Grundidee besteht darin, alle Lesevorgänge vor den Schreibvorgängen auszuführen, die das Layout eines Elements ändern. Solange Sie diesem Prinzip folgen, ist es weniger wichtig, welche Eigenschaften Sie verwenden. Natürlich ist es immer eine gute Idee, Eigenschaften zu verwenden, die so wenig wie möglich funktionieren.

. High-Performance Animations ist eine gute Ressource auf, was Eigenschaften jedoch effizient sind. Dies bezieht sich auf den von Derek erwähnten Schichtenansatz.

Quelle

2017-10-24 22:02:24

Minimieren "Zwangs Reflow"

Antwort

Verwandte Themen