Spürbare Flex 3-Leistungssteigerung mit Canvas vs VBox/HBox?

Question

Mir wurde gesagt, dass es eine Leistungssteigerung bei der Verwendung von Canvas im Vergleich zu HBox oder VBox gibt, wenn die Position von Kindern festgelegt wird. Aus diesem Grund wurde eine Reihe unserer Komponenten auf Canvas umgestellt. Jetzt wird jedoch Code hinzugefügt, um die x- und y-Positionierung einiger untergeordneter Elemente basierend auf der Breite und Höhe anderer untergeordneter Elemente zu berechnen. Lohnt es sich, ein Canvas zu verwenden, um die Leistung zu erhöhen, wenn Code hinzugefügt werden muss, um die Koordinaten/Positionen der Kinder zu bestimmen? Gibt es eine bessere Methode oder Technik, die praktiziert werden sollte, als nur die Anzahl der hinzugefügten ui-Komponenten zu minimieren und die Positionierung absolut zu spezifizieren?

Answer 1

Es gibt eine Reihe von Techniken der mittleren Ebene, von denen eine die Verwendung von Rendering-Komponenten, wie TileGrid oder ItemRenderers, wenn Ihr Layout eine bestimmte Formel passt. Wenn Sie Formulare verwenden, verwenden Sie die Layoutkomponente Form, anstatt ein benutzerdefiniertes Layout zu verwenden.Wenn Sie die Layout-Engine in Flex verwenden müssen, sollten Sie sich daran erinnern, dass das Framework bei der Leistungssteigerung bestimmte Techniken verwendet, die der unten stehenden Liste folgen, wobei die letzte die meiste Leistung erbringt Intensiv:

1. absolute Positionierung (<Canvas>)
2. relative Positionierung (<VBox>)
3. Constraint basierende Positionierung (right=0)
4. advanced constrai nt-basierte Positionierung (<constraintColumns>)

Die relative Positionierung ist normalerweise nicht so leistungsintensiv. Wenn Sie feststellen, dass dies der Fall ist, könnten Sie zu viele verschachtelte Container verwenden. Sehen Sie sich Ihre Layout-Architektur an und versuchen Sie herauszufinden, wie Ihre Objekte "überdimensioniert" werden können und vereinfachen Sie sie. Ein gutes Werkzeug hierfür ist FlexSpy, mit dem Sie das Objektlayout zur Laufzeit untersuchen können.

Ein weiterer häufig auftretender Leistungsengpass besteht darin, dass Ihre Anwendung genau zu dem Zeitpunkt, an dem Ihre GUI versucht, auf Benutzerinteraktionen zu reagieren, einige Berechnungen durchführt. Obwohl derzeit keine grünen Threading-Frameworks existieren, mit denen Sie UI und Logik in separaten "Threads" ausführen können, können Sie ein gutes Architektur-Framework wie Cairngorm oder Mate (es gibt viele) verwenden, die Befehle anstelle von Straight-Up-Methoden verwenden Diese Funktionsausführung, die Verarbeitungszyklen beanspruchen kann, wartet, bis die Benutzeroberfläche auf den Benutzer reagiert hat.

Answer 2

Um sicherzustellen, dass ich verstehe:

• Sie gehört, dass Canvas Kinder schneller als [VH] Box
• Leinwand tut nur absolute Positionierung haben eine
• einige (viele?) Ihrer Komponenten positionieren absolute Position, so dass Sie geschaltet Canvas mit
• Aber einige Ihrer Komponenten eine relative Position, so dass Sie Code schreiben müssen, um sie zu positionieren

Stimmt das?

Wie auch immer, vorausgesetzt, ich bin richtig (was möglicherweise nicht der Fall ist), das erste, was Sie tun möchten, ist die funktionierende Schnittstelle, die die wenigsten Zeilen Code erfordert, dann entscheiden, ob es "gut genug" ist. Sie wollen die mit den wenigsten Codezeilen, weil Studien gezeigt haben, dass es eine Korrelation zwischen Codezeilen und der Anzahl der Fehler gibt (und Sie keine Fehler wollen). Sie wollen sehen, ob es "gut genug" ist, denn wenn es "gut genug" ist, müssen Sie nichts tun (wenn Sie tun versuchen und es schneller machen, verpflichten Sie Premature Optimization).

Aber das ist wahrscheinlich nicht das, was Sie :)

So hören wollte auch ich werde vorschlagen, dass, wenn Sie mit Canvas-basierte Layout bleiben möchten, können Sie versuchen, kleben die alle relativ positioniert Inhalt innen [VH] Boxen, die dann absolut innerhalb des Canvas positioniert werden. Es besteht eine gute Chance, dass der Code, den Adobe geschrieben hat, schneller ist als Code, also sollten Sie versuchen, davon Gebrauch zu machen.

Aber der einzige Weg, um sicher zu wissen, ist es zu versuchen und Profil es.

Answer 3

ein paar Dinge, die man im Auge behalten will, während eine Flex UI Optimierung:

1. Vermeidung übermäßige Verschachtelung von Containern. Erwägen Sie die Verwendung eines Canvas mit absoluter oder einschränkungsbasierter Positionierung über die Verschachtelung vieler HBox/VBox-Elemente. Dies bedeutet jedoch nicht, dass Sie VBox/HBox NIE verwenden sollten. Sie können mischen und anpassen, indem Sie z. B. ein Canvas als Hauptcontainer verwenden und untergeordnete Boxen nach Bedarf positionieren. Versuchen Sie nur, zu viel Verschachtelung zu vermeiden.

2. Das UIComponent-Modell in benutzerdefinierten Komponenten ordnungsgemäß verwenden. Verwenden Sie insbesondere invalidateProperties(), invalidateSize() und invalidateDisplayList(), damit ihre begleitenden Funktionen (commitProperties(), measure() und updateDisplayList()) zu einem optimalen Zeitpunkt für den Flash Player aufgerufen werden. Deepa gibt eine große Diskussion über diese hier:

http://tv.adobe.com/#vi+f15384v1002

Sie erklärt, wie die starke Nutzung des Ungültigkeits Schema machen kann der Flash Player den Code zu einem idealen Zeitpunkt auszuführen, also nicht in der Mitte ein Bildschirm-Update. Diese Prinzipien werden von allen Flex-Komponenten verwendet und können unabhängig vom verwendeten Framework genutzt werden.