Wie man CSS3-Rendering für optimale Leistung anwendet

Question

Ich erstelle eine Webanwendung und nach Erreichen einer gewissen Komplexität merke ich, dass, wenn ich die Seite benutze, der Lüfter meines Laptops hoch läuft, vielleicht vom Prozessor oder Grafikkarte. Ich habe es bisher nur in Spielen oder grafischer Bearbeitung so gesehen.

Ich profilierte das Javascript und bemerkte keine Prozesse, die zu viel Ressourcen verbrauchen, also dachte ich, dass es vielleicht das CSS sein könnte.

Ich bin mit ein paar Animationen mit Übergang, und Opazität übersetzen.

Meine Frage ist: Werden diese CSS-Eigenschaften meine Leistung beeinflussen? Wie benutzt man diese Elemente optimal? Könnte eine breite (nicht zu breite) Frage sein, aber irgendwelche Tipps würden sehr helfen.

Answer 1

Wie Terry erwähnt, wird die Verwendung der Transformationsmatrix dazu führen, dass der Browser diese an die GPU weitergibt, aber Sie müssen auch vorsichtig sein.

In der Regel erledigen Desktops und Laptops dies sehr gut (es sei denn, Sie geben große Bilder, riesige SVGs oder viele von ihnen gleichzeitig, in diesem Szenario gibt es nicht viel normale GPU in einem Computer/Gerät) , aber Geräte haben immer noch weniger leistungsfähige Hardware, also nicht zu viel verwenden. Wenn Sie beispielsweise translate-Eigenschaften anstelle von left und top verwenden, erhöhen Sie die Leistung des Browsers, da das Rendern in der GPU erfolgt.

Wenn Sie an JS-Animation interessiert sind, wäre eine solide Wahl, Greensock zu verwenden, da es die Fähigkeit hat, eine GPU-Schicht zu erstellen und sie dann zu entfernen, um die GPU zu vermeiden. Handhabt auch die Müllsammlung auf eine ausgezeichnete Weise. Ich habe in vielen Projekten mit ausgezeichneten Ergebnissen verwendet, auch brauchen Sie nicht viel JS-Kenntnisse, um es zu verwenden.

Edit:

@raphadko, glaube ich, ist gut in diesem Video zu sehen, die grundlegenden Fragen in Bezug auf Browser Rendering-Leistung zu verstehen:

https://www.youtube.com/watch?v=0xx_dkv9DEY