[Flex3] Rendering extrêmement lent

Rendering extrêmement lent

Bonjour,

J'ai un gros problème avec l'affichage d'une page en flex (SDK 3.0).
En effet, il est tellement lent que l'on arrive avec un pc non ultra haut de gamme quasi tout le temps à un timeout (15 secondes).

Je crois avoir cerné le problème, en fait à causes de calculs de tailles(hauteur/largeur) d'élément qui sont dinamyquement ajoutés/définis à l'initialisation (repeater, etc.) il se pourrait que flex passe son temps à recalculer les tailles avant même que cela n'ai pour moi un intérêt (vu que je cache tout derrière un "écran loading" pendant ce temps).

J'aimerais savoir, s'il est possible (et si oui quelle serait la méthode la plus pratique) d'empêcher flex de faire ce travail jusqu'à ce que tout les éléments soient présents càd que le moment de calculer les tailles soit venu.

Merci beaucoups.

Voila qui est plus intéressant comme tournure de problème ;)

Ne connaissant pas ton code (et ayant toujours des soucis avec ton pb de timeout en flex :?) les seuls points vers lesquels je peux t'orienter sont :
si il s'agit vraiment d'un soucis de calcul de taille, d'essayer avec des dimensions fixe de tes composants dans un premier temps pour vérifier ta théorie.
-d'essayer de voir si tu n'as pas une boucle infini dans ton code par exemple un invalidate sur un creationcomplete de composant...
Enfin si tu as vraiment trop d'éléments à répéter peut être devrais tu utiliser une pagination (ou faire des essais avec moins d'éléments dans un premier temps) ou peut être te tourner vers un autre composant que le repeater.

Je dois dessiner une série d'éléments composés et "complexes".
Je me suis naturellement diriger vers l'emploi d'un repeater qui intuitivement me semblerait plus performant qu'une liste ou autre pour cela.

Qu'est-ce que peut avoir repeater de si dégradant envers les performances ?
Je ne connais aucun UI ou l'ajout d'élément est plus lent via une pseudo boucle "for" que via une structure avancée "list/tree".

Ci-dessous, le résultat obtenu (obtenu en limitant le nombre d'éléments afin d'éviter le timeout fatidique).
Encadré en rouge : l'élément répété (qui contient entre autres des drop down listboxes)
Encadré en bleu : Une liste à l'intérieur de l'élément répété.

http://www.developpez.net/forums/att...1&d=1271405925

Le code des éléments répétés :

Attention, ce code n'est pas le code original mais déjà partiellement modifier pour distribuer la charge de travail dans le temps (usage de setTimeout) et ainsi laisser de temps en temps une chance à Flex de récupérer la main sur le process et éviter un timeout

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
 
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
	height="100%" xmlns:local="*"
 
	creationComplete="init(event)"
 
	backgroundColor="white"
	paddingTop="3"
	paddingBottom="3"
	>
<mx:Script>
	<![CDATA[
		import mx.binding.utils.BindingUtils;
		import mx.messaging.MessageAgent;
		import mx.messaging.config.ConfigMap;
		import mx.collections.ArrayCollection;
		import mx.controls.List;
		import mx.controls.listClasses.BaseListData;
		import mx.core.Application;
		import mx.events.FlexEvent;
		import mx.core.UIComponent;
		import mx.containers.ControlBar;
		import mx.managers.DragManager;
		import mx.events.DragEvent;
		import mx.controls.Alert;
		import mx.events.CloseEvent;
 
 
		public function get timeElements():Object {
			return (MyGolfPrototype) (this.parentDocument).timeElements;
		}
 
		public function getMinuteIndex(dt:Date):int {
			return dt.minutes;
		} 
 
		public function getHourIndex(dt:Date):int {
			return dt.hours;
		} 
 
		public function getDelayIndex(dataProvider:Object, d:int):int {
			var list:ArrayCollection = (ArrayCollection) (dataProvider);
			for (var x:int = 0; x < list.length; x++) {
				if ((int) (list[x]) == d) {
					return x;
				}
			}
			return -1;
		}
 
		static private var s:ArrayCollection = null;
		public function init(event:Event):void {
			var mgp:MyGolfPrototype = (MyGolfPrototype) (this.parentDocument);
 
			var f:Function = function() {
				cmbHrsTo.dataProvider = cmbHrsFrom.dataProvider = timeElements.listHours;
				cmbMinTo.dataProvider = cmbMinFrom.dataProvider = timeElements.listMinutes;
				cmbHrsFrom.selectedIndex = getHourIndex(data.startTime);
				cmbMinFrom.selectedIndex = getMinuteIndex(data.startTime);
				cmbHrsTo.selectedIndex = getHourIndex(data.endTime);
				cmbMinTo.selectedIndex = getMinuteIndex(data.endTime);
 
				TreeId.allowMultipleSelection = true;
				TreeId.dataProvider = data.provider;
				TreeId.height = computeHeight(TreeId);
 
				mgp.ctzMan.selectionReinit();
			};
 
			if (s == null) {
				s = new ArrayCollection();
 
				var fun:Function = function() {
					var func:Function = s.removeItemAt(0) as Function;
					func.call();
					if (s.length >0) {
						setTimeout(fun, 1);
					}	
				}
 
				setTimeout(fun, 100);
			}
			s.addItem(f);
 
			mgp.endOfSplash();
		}
 
		public function fDragEnter(event:DragEvent):void {
			(MyGolfPrototype) (Application.application).ctzMan.dragEnter(event, this.data.ctzId);
		}
 
		public function fDragDrop(event:DragEvent):void {
			(MyGolfPrototype) (Application.application).ctzMan.dragDrop(event, this.data.ctzId);
		}
 
		public function fDragComplete(event:DragEvent):void {
			(MyGolfPrototype) (Application.application).ctzMan.removeHighlight();
		}
 
		protected function applyChange(event:Event):void {
			var nCtz:CTZElement = new CTZElement();
 
			nCtz.ctzId = this.data.ctzId;
			nCtz.delay = (int) (this.cmbDelay.selectedItem);
			nCtz.nPlayersPFlight = (int) (this.cmbPlayers.selectedItem);
			nCtz.startTime = new Date(this.dfFrom.selectedDate.getTime());
			nCtz.startTime.setHours(this.cmbHrsFrom.selectedItem, this.cmbMinFrom.selectedItem, 0, 0);
			nCtz.endTime = new Date(this.dfTo.selectedDate.getTime());
			nCtz.endTime.setHours(this.cmbHrsTo.selectedItem, this.cmbMinTo.selectedItem, 0, 0);
 
			(MyGolfPrototype) (Application.application).ctzMan.changeCTZ(nCtz);
		}
 
		protected function deleteCTZ(event:Event):void {
			Alert.show(GolfMessages.ctzDeleteConfirm, "Confirm Timezone removal", Alert.YES | Alert.NO, this , this.AlertEvtHandler_deleteCTZ, null, Alert.YES);
		}
 
		protected function AlertEvtHandler_deleteCTZ(eventObj:CloseEvent):void {
			if (eventObj.detail == Alert.YES) {
				(MyGolfPrototype) (Application.application).ctzMan.removeCTZ(this.data.ctzId);
			}
		}
 
		protected function flightsModification(number:int, sens:int, move:Boolean):void {
			(MyGolfPrototype) (Application.application).ctzMan.flightsModification(this.data.ctzId, number, sens, move);
		}
 
		public function flightsAdvancedModification(number:int, fligthNo:int, sens:int):void {
			(MyGolfPrototype) (Application.application).ctzMan.flightsAdvancedModification(this.data.ctzId, number, fligthNo, sens);
		}
 
		protected function computeHeight(tr:List):int {
			return (tr.dataProvider.length + 1) * tr.rowHeight;
		}
 
       	public function btnEnabledAddEnd():Boolean {
       		if (data.maxDate == null) return true;
       		return new Date(data.endTime.getTime() + 60000 * data.delay) <= data.maxDate;
       	}
 
       	public function btnEnabledAddStart():Boolean {
       		return new Date(data.startTime.getTime() - 60000 * data.delay) >= data.minDate;
       	}
 
       	private var nbItemRendered:int = 0;
       	public function getColor():int {
       		return ((nbItemRendered++) / data.nPlayersPFlight) % 2;
       	}
	]]>
</mx:Script>
	<mx:VBox width="100%">
		<mx:Grid width="100%">
			<mx:GridRow width="100%">
				<mx:GridItem width="33%">
					<mx:Button label="+ flight ↑" click="flightsModification(1, -1, true);" enabled="{btnEnabledAddStart()}" />
				</mx:GridItem>
				<mx:GridItem width="34%" horizontalAlign="center">
					<mx:Button id="btEditCTZ" label="Edit Timezone" click="MyGolfPrototype.fold(vbEditCTZ, 0)" />
				</mx:GridItem>
				<mx:GridItem width="33%" horizontalAlign="right">
					<mx:Button label="- flight ↓" click="flightsModification(-1, -1, true);" />
				</mx:GridItem>
			</mx:GridRow>
		</mx:Grid>
		<mx:VBox width="100%" verticalAlign="top" id="vbEditCTZ" height="0" horizontalAlign="center"
			>
			<mx:VBox
				borderColor="#000000"
				borderStyle="solid"
				paddingBottom = "4"
				paddingLeft = "4"
				paddingRight = "4"
				paddingTop = "4"
				>
				<mx:HBox horizontalAlign="left">
					<mx:Label text="From" width="40" />
					<mx:DateField id="dfFrom" selectedDate="{data.startTime}" formatString="DD-MM-YYYY" />
					<mx:ComboBox id="cmbHrsFrom" />
					<mx:ComboBox id="cmbMinFrom" />
				</mx:HBox>
				<mx:HBox horizontalAlign="left">
					<mx:Label text="To" width="40" />
					<mx:DateField id="dfTo" selectedDate="{data.endTime}" formatString="DD-MM-YYYY" />
					<mx:ComboBox id="cmbHrsTo" />
					<mx:ComboBox id="cmbMinTo" />
				</mx:HBox>
				<mx:HBox width="100%" horizontalAlign="left">
					<mx:Label text="Delay"/>
					<mx:ComboBox id="cmbDelay" selectedIndex="{getDelayIndex(cmbDelay.dataProvider, data.delay)}">
						<mx:Number>6</mx:Number>
						<mx:Number>7</mx:Number>
						<mx:Number>8</mx:Number>
						<mx:Number>9</mx:Number>
						<mx:Number>10</mx:Number>
						<mx:Number>11</mx:Number>
						<mx:Number>12</mx:Number>
						<mx:Number>13</mx:Number>
						<mx:Number>14</mx:Number>
						<mx:Number>15</mx:Number>
						<mx:Number>16</mx:Number>
						<mx:Number>17</mx:Number>
						<mx:Number>18</mx:Number>
						<mx:Number>19</mx:Number>
						<mx:Number>20</mx:Number>
					</mx:ComboBox>
					<mx:HBox width="100%" horizontalAlign="right">
						<mx:Label text="Nb Players"/>
						<mx:ComboBox id="cmbPlayers" selectedIndex="{getDelayIndex(cmbPlayers.dataProvider, data.nPlayersPFlight)}">
						<mx:Number>2</mx:Number>
						<mx:Number>3</mx:Number>
						<mx:Number>4</mx:Number>
						<mx:Number>6</mx:Number>
						<mx:Number>8</mx:Number>
						</mx:ComboBox>
					</mx:HBox>
				</mx:HBox>
				<mx:HBox width="100%">
					<mx:Button id="btnApply" label="Apply" click="applyChange(event)" />
					<mx:HBox width="100%" horizontalAlign="right">
						<mx:Button id="btnDelete" label="Delete" click="deleteCTZ(event)"/>
					</mx:HBox>
				</mx:HBox>
			</mx:VBox>
		</mx:VBox>
		<mx:List id="TreeId"
			width="100%" 
			itemRenderer="CTZMemberElement"
			rowHeight="22"
			selectable="false"
			variableRowHeight="false"
			paddingTop="0"
			paddingBottom="0"
			paddingLeft="0"
			paddingRight="0"
			dragComplete="fDragComplete(event);"
			>
		</mx:List>
 
		<mx:HBox width="100%">
			<mx:Button label="+ flight ↓" click="flightsModification(1, 1, true);" enabled="{btnEnabledAddEnd()}"/>
			<mx:HBox horizontalAlign="right" width="100%">
				<mx:Button label="- flight ↑" click="flightsModification(-1, 1, true);" />
			</mx:HBox>
		</mx:HBox>
	</mx:VBox>
</mx:VBox>

Et le code de la liste "CTZMemberElement" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
	creationComplete="initO(event)"
	>
<mx:Script>
	<![CDATA[
		import mx.formatters.SwitchSymbolFormatter;
		import mx.binding.utils.BindingUtils;
		import mx.collections.ArrayCollection;
		import mx.containers.VBox;
		import mx.core.Application;
		import mx.events.FlexEvent;
		import mx.core.DragSource;
		import mx.managers.DragManager;
		import mx.events.DragEvent;
		import mx.controls.Tree;
 
		public var sourceCTZ:CompTzRenderer;
 
		private static var bgColors:Array = [0xf2f7ed, 0xd1e3c3];
 
		private function getColor(bgColor:int):int {
			return bgColors[bgColor];
		} 
 
		private var mouseReference:MouseEvent;
 
       	protected function hcpText(hcp:String):String {
       		return hcp.length < 1 ? "" : "[" + hcp + "]";
       	}
 
       	public function setNormalStyle():void {
       		mainContainer.setStyle("backgroundColor", null);
       	}
 
       	public function setHighlightStyle():void {
			mainContainer.setStyle("backgroundColor", 0x00BB44);
       	}
 
		public function setNormalStyle2():void {
       		mainContainer.setStyle("color", 0x000000);
       	}
 
       	public function setHighlightStyle2():void {
			mainContainer.setStyle("color", 0xd42c0f);
       	}       	
 
       	protected function initO(event:Event):void {
       		if (!this.initialized) {
       			return;
       		}
       		/**
       		 When the parentDocument is not of type CompTzRenderer
       		 it means this component have been created manually
       		 (as a visible drag proxy for instance)
       		 **/
       		if (!(this.parentDocument is CompTzRenderer)) {
       			return;
       		}
 
       		this.sourceCTZ = (CompTzRenderer) (this.parentDocument);
 
    		mainContainer.addEventListener(DragEvent.DRAG_ENTER, this.sourceCTZ.fDragEnter);
 
			mainContainer.addEventListener(DragEvent.DRAG_DROP, this.sourceCTZ.fDragDrop);
			mainContainer.addEventListener(MouseEvent.MOUSE_DOWN, (MyGolfPrototype) (Application.application).ctzMan.selectionManagment);
			mainContainer.addEventListener(MouseEvent.MOUSE_DOWN, this.downMe);
       	}
 
 
       	private function changeHour(im:Image, dummy:Object):Object {
       		if (data == null) {
       			return null;
       		}
 
       		if (data.attributes.hour == "none") {
       			im.visible = false;
       			return null;
       		}
 
       		var source:Object;
 
       		switch (data.attributes.hour) {
       			case "blue" :
		       		source = (MyGolfPrototype) (Application.application).hourBlue;
		       		im.toolTip = "No prefered hour";
	       			break;
       			case "green" :
		       		source = (MyGolfPrototype) (Application.application).hourGreen;
		       		im.toolTip = "Prefered hour";
	       			break;
       			case "yellow" :
		       		source = (MyGolfPrototype) (Application.application).hourYellow;
		       		im.toolTip = "Close to prefered hour";
	       			break;
       			default :
		       		source = (MyGolfPrototype) (Application.application).hourRed;
		       		im.toolTip = "Far from prefered hour";
    	   			break;
       		}
       		im.toolTip += " ( " + data.attributes.preferedHours + " )";
 
       		im.width = 15;
       		im.height = 15;
       		im.visible = true;
 
       		return source;
       	}
 
       	private function getStage():Stage {
       		return (Application) (Application.application).stage;
       	}
 
       	protected function downMe(event:MouseEvent):void {
       		this.mouseReference = event;
			getStage().removeEventListener(MouseEvent.MOUSE_MOVE, this.moveMe);				
			getStage().addEventListener(MouseEvent.MOUSE_MOVE, this.moveMe);				
       	}       	
 
       	protected function moveMe(event:MouseEvent):void {
       		if (!event.buttonDown) {
       			getStage().removeEventListener(MouseEvent.MOUSE_MOVE, this.moveMe);
       			return;
       		}
 
			var distance:Number;
			distance = Math.sqrt(Math.pow(this.mouseReference.stageX - event.stageX, 2)
						+ Math.pow(this.mouseReference.stageY - event.stageY, 2));
 
			if (distance > 7.0) {
				var dragElements:Array = (Application.application).ctzMan.getSelectedElements();
 
				if (dragElements.length < 1) {
					return;
				}
 
				var source:DragSource = new DragSource();
				source.addData(dragElements, "treeItems");
 
				var proxy:VBox = new VBox();
				proxy.alpha = 0.75;
 
				for (var x:int = 0; x < dragElements.length; x++) {
					var proxyInternalElement:CTZMemberElement = new CTZMemberElement();
					proxyInternalElement.data = dragElements[x];
					proxy.addChild(proxyInternalElement);
				}
 
				proxy.width = this.width;
				proxy.height = this.height * dragElements.length;
				proxy.x = this.sourceCTZ.TreeId.contentMouseX - (proxy.width / 2);
				proxy.y = this.sourceCTZ.TreeId.contentMouseY;
 
				DragManager.doDrag(this.sourceCTZ.TreeId, source, event, proxy);
				getStage().removeEventListener(MouseEvent.MOUSE_MOVE, this.moveMe);				
			}
       	}
 
       	private function flightCanAdd(source:Object):Boolean {
       		if (source.attributes.flightNo == 0) {
       			return false;
       		}
       		switch (source.attributes.flightSens) {
       			case - 1:
       				return sourceCTZ.btnEnabledAddStart();
       			default :
       				return sourceCTZ.btnEnabledAddEnd();
       		}
       	}
 
       	private function flightCanRemove(source:Object):Boolean {
       		return source.attributes.flightNo > 0;
       	}
 
       	private function getRemoveToolTip(source:Object):String {
       		switch (source.attributes.flightSens) {
       			case - 1:
       				return "Remove this flight and pull the ones above it (Time Zone starts later)";
       			default :
       				return "Remove this flight and pull the ones below it  (Time Zone ends sooner)";	
       		}
       	}
 
       	private function getAddToolTip(source:Object):String {
       		switch (source.attributes.flightSens) {
       			case - 1:
       				return "Add an empty flight on top of this one (Time Zone starts sooner)";
       			default :
       				return "Add an empty flight on bottom of this one (Time Zone ends later)";	
       		}
       	}
 
       	protected function flightsAdvancedModification(source:Object, number:int):void {
       		if (number < 0) {
       			if (source.attributes.flightSens == 1) {
   					sourceCTZ.flightsAdvancedModification(-1, source.attributes.flightNo - 1, 1);
       			} else {
       				sourceCTZ.flightsAdvancedModification(-1, source.attributes.flightNo + 1, -1);
       			}
       		} else {
       			sourceCTZ.flightsAdvancedModification(number, source.attributes.flightNo, source.attributes.flightSens);
       		}
       	}
	]]>
</mx:Script>
	<mx:HBox width="100%" height="100%" horizontalGap="0">
		<mx:HBox
			paddingTop="2"
			paddingBottom="2"
			horizontalGap="0"
			paddingLeft="0"
			paddingRight="0"
			verticalAlign="middle"
			height="100%"
			backgroundColor="#FFFFFF"
			>
			<mx:Image source="{(MyGolfPrototype) (Application.application).imPlus}" height="11" width="11"
				toolTip="{getAddToolTip(data)}"
				visible="{flightCanAdd(data)}"
				click="flightsAdvancedModification(data, 1)"
				/>
			<mx:Image source="{(MyGolfPrototype) (Application.application).imMinus}" height="11" width="11"
				visible="{flightCanRemove(data)}"
				toolTip="{getRemoveToolTip(data)}"
				click="flightsAdvancedModification(data, -1)"
				/>
		</mx:HBox>
		<mx:HBox width="100%" height="100%"
			paddingTop="2"
			paddingBottom="2"
			paddingLeft="2"
			paddingRight="2"
			id="mainContainer"
			>
				<mx:HBox id="subCanvas" horizontalAlign="left" width="100%"
					backgroundColor="{getColor(data.attributes.bgColor)}"
					>
					<mx:Label text="{data.attributes.bhour}" />
					<mx:Label text="{data.attributes.name}" width="180"/>
					<mx:HBox horizontalAlign="right" width="100%" >
						<mx:Label text="{hcpText(data.attributes.hcp)}" />
						<mx:HBox verticalAlign="middle" width="15" height="100%">
							<mx:Image id="imHour" source="{changeHour(imHour, data)}" />	
						</mx:HBox>
					</mx:HBox>
				</mx:HBox>
		</mx:HBox>
	</mx:HBox> 
</mx:Canvas>

J'avais lu un article il y a quelque temps sur les bonnes pratiques Flex qui disait d'éviter le plus possible les repeaters. Et voici un article expliquant comment amélioré les performances de ton application : http://www.adobe.com/devnet/flex/art...t_perf_10.html

Citation:

If a single instance of the repeated view takes a noticeable time to instantiate, repeating makes it worse. As mentioned previously in this article, multiple Grid containers in a Repeater object do not perform well because Grid containers themselves are resource-intensive containers to instantiate.

Donc attention avec les repeaters !

++

+1 pour Ellene, tu mélanges des composants d'usages assez extensifs et tu les répètes beaucoup de fois.

De plus, il me semble que tu fait faire trop de travail "inutile" à ton application prenons un exemple assez simple à changer : ta box Edit Timezone. Tu l'instancie et la remplie à chaque répétition (avec tout ce que cela implique de calcul de taille, de date etc.) tout en faisant attention il me semble de la masquer (height =0) et de faire un bouton pour la faire apparaitre en cas de besoin... Ne peut tu pas en faire un composant à part et l'instancier/remplir à la demande ? (via addchild ou pop up etc.)

Tu peux également changer ton grid par une simple HBox et 2 spacer ou un canvas et les propriétés left, horizontalCenter et right à 0 respectivement pour tes 3 boutons ce qui devrait te faire gagner des ressources.

Essais de voir également si il n'y a pas d'autres "calcul" que tu ne peut pas éviter et ne les faire faire que si ils sont utiles et non pas systématiquement à chaque repeat.

Je vais déjà essayer de me server de mx:spacer pour simplifier les calculs.
J'ignorais cette astuce.

Je ne note pas de grande différence mais j'aimerais savoir, quand un élément est lié à des données (data) on ne peut pas accéder à "data" dès l'initialisation, pourtant c'est à l'initialisation qu'il faudrait populer les listes car lors de creationcomplete c'est déjà trop tard, le calcul des tailles a été fait et populer les listes ne fera que causer un recalcul.

Comment se servir de data avant le calcul des tailles dans un éléments enfant d'un repeater/list/autre... ?