Führt tiefes Schachteln von Flexboxen zu Performance-Problemen?
Ich habe an einem ReactJS-Projekt gearbeitet, bei dem ich die meisten Komponenten mit dem Flexbox-Layout erstellt habe. Da mit react, können wir tief verschachtelte Komponenten haben, so dass mein Layout geschachtelt Flexbox-Layout hat.
Jetzt ist meine Frage, hat das irgendein Problem mit der Leistung? Auf einer einzelnen Seite gibt es viele Komponenten und jede Komponente hat ein geschachteltes Flexbox-Layout mit 3 bis 4 Ebenen. Wird dies zu einem Leistungsproblem führen?
2 Antworten
Habe einen kleinen Test gemacht. Es wurden 100 Komponenten mit jeweils 10 verschachtelten Layouts gerendert. Mit und ohne Flexbox. Hier sind die Code-Schnipsel:
Komponente / index.js
%Vor%WithFlex / index.js
%Vor%OhneFlex / index.js
%Vor%Ergebnisse aus der Chrome-Entwicklungszeitleiste.
WithFlex
OhneFlex
Zusammenfassung
Der Unterschied ist nicht so viel. Auch in der flexbox stelle ich zufällige Eigenschaften zur Auswahl. Also ich denke, es ist in Ordnung mit der Leistung. Ich hoffe, es wird anderen Entwicklern helfen.
Die alte flexbox (display: box) ist 2,3 mal langsamer als die neue flexbox (display: flex). Regelmäßiges Block-Layout (nicht-float), wird in der Regel so schnell oder schneller als neue flexbox sein, da es immer Single-Pass ist. Die neue flexbox sollte jedoch schneller sein als die Verwendung von Tabellen oder das Schreiben von benutzerdefiniertem JS-Basis-Layout-Code. Für mehr Information Artikel1 Artikel2