Augmentation sensible des performances de Flex 3 en utilisant Canvas vs VBox/HBox?

Question

On m'a dit qu'il y a une augmentation des performances lors de l'utilisation de Canvas par rapport à HBox ou VBox lors de l'élaboration de la position des enfants. En conséquence, un certain nombre de nos composants ont été convertis en Canvas. Cependant, maintenant, du code est ajouté pour calculer le positionnement x et y de certains éléments enfants en fonction de la largeur et de la hauteur des autres enfants. Vaut-il la peine d'utiliser un canevas pour augmenter les performances si le code doit être ajouté pour déterminer les coordonnées/positions des enfants? Y a-t-il une meilleure méthode ou technique disponible qui devrait être mise en pratique autre que la simple minimisation du nombre de composants ui ajoutés et en spécifiant le positionnement absolument?

Answer 1

Il existe un certain nombre de techniques de compromis, dont l'une consiste à utiliser des composants de type rendu, tels que TileGrid ou ItemRenderers, si votre disposition correspond à une certaine formule. Si vous utilisez des formulaires, essayez d'utiliser le composant de présentation Form au lieu d'utiliser une disposition personnalisée.Si vous avez besoin d'utiliser le moteur de présentation dans Flex, la meilleure façon d'optimiser votre utilisation est de vous rappeler que certaines techniques sont utilisées par le framework pour augmenter la charge de performance, suivant la liste ci-dessous, la dernière étant la plus performante intensive:

1. positionnement absolu (<Canvas>)
2. positionnement relatif (<VBox>)
3. positionnement par contrainte-(right=0)
4. constrai avancé positionnement basé sur la technologie nt (<constraintColumns>)

L'utilisation d'un positionnement relatif n'est généralement pas très gourmande en performances. Si vous constatez que c'est le cas, il se peut que vous utilisiez trop de conteneurs imbriqués. Examinez votre architecture de mise en page et essayez de trouver des façons de sur-aligner vos objets, et simplifiez-les. Un bon outil pour cela est FlexSpy, qui vous permet d'introspecter la mise en page des objets lors de l'exécution.

Un autre goulot d'étranglement des performances est que votre application tente de faire un certain nombre de calculs au moment même où votre interface graphique tente de répondre à l'interaction de l'utilisateur. Bien qu'aucun framework de threading vert n'existe pour l'instant qui vous permette d'exécuter l'interface utilisateur et la logique dans des threads séparés, vous pouvez utiliser un bon framework architectural comme Cairngorm ou Mate (il y en a beaucoup) qui utilise des commandes plutôt que des méthodes directes. cette exécution de fonctionnalité qui peut prendre des cycles de traitement attend jusqu'à ce que l'interface utilisateur ait fini de répondre à l'utilisateur.

Answer 2

Pour vous assurer que je comprends:

• Vous avez entendu que Canvas peut placer les enfants plus vite que [VH] Box
• Canvas ne fait que le positionnement absolu
• Certains (beaucoup?) De vos composants ont une position absolue, de sorte que vous commencé à utiliser Canvas
• Mais certains de vos composants ont une position relative, vous devez donc d'écrire du code pour les positionner

Est-ce exact? De toute façon, en supposant que je sois correct (ce qui peut ne pas être le cas), la première chose que vous voulez faire est de choisir l'interface de fonctionnement qui nécessite le moins de lignes de code, puis décidez si c'est "assez bon". Vous voulez celui avec le moins de lignes de code, car les études ont montré qu'il existe une corrélation entre les lignes de code et le nombre de bogues (et vous ne voulez pas de bugs). Vous voulez voir si c'est "assez bon" parce que, si c'est "assez bon", vous n'avez rien à faire (si vous faire essayez de le rendre plus rapide, vous commettez Premature Optimization). à l'intérieur [VH]

Mais c'est probablement pas ce que vous vouliez entendre :)

donc je suggère aussi que, si vous voulez coller avec la mise en page à base de toile, vous essayez de coller tout le contenu relativement positionné Les boîtes, qui sont ensuite absolument positionnées à l'intérieur du canevas. Il y a de fortes chances que le code qu'Adobe a écrit soit plus rapide que le code, vous devriez donc essayer d'en profiter.

Mais la seule façon de savoir avec certitude est de l'essayer et le profil.

Answer 3

Un couple de choses que vous voulez garder à l'esprit tout en optimisant une interface utilisateur Flex:

1. Évite imbrication excessive des conteneurs. Envisagez d'utiliser un canevas avec un positionnement absolu ou basé sur des contraintes plutôt que d'imbriquer des lots d'éléments HBox/VBox. Cependant, cela ne signifie pas que vous ne devriez JAMAIS utiliser VBox/HBox. Vous pouvez mélanger et assortir, par exemple en utilisant un canevas comme conteneur principal et en positionnant les boîtes enfants à l'intérieur de celles-ci selon les besoins, essayez simplement d'éviter de trop imbriquer. Utilisation correcte du modèle UIComponent dans les composants personnalisés. En particulier, en utilisant invalidateProperties(), invalidateSize() et invalidateDisplayList() pour que leurs fonctions associées (commitProperties(), measure() et updateDisplayList()) soient invoquées au moment optimal pour Flash Player. Deepa donne un grand discours sur ce ici:

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

Elle explique comment faire une utilisation intensive du système d'invalidation permet au Flash Player pour exécuter votre code à un moment idéal, à savoir pas au milieu de une mise à jour de l'écran. Ces principes sont utilisés par tous les composants Flex et peuvent/doivent être exploités indépendamment du cadre utilisé.