Créer des options dynamiquement

**gwyohm** · 21/07/2010, 15h22

Bonjour à tous,

Ayant survolé ce message:
Exécuter une fonction avant une autre ,
J'ai été surpris de voir la méthode de création dynamique d'options dans un select, (en passant par un createElement("option"), puis en faisant un add)...
J'ai toujours fait des new Option(); puis positionner mon option en dernier.
J'ai donc fait un petit test pour voir le mieux:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<body>
	Saisir le nombre d elements à créer<input type="text" id="nbelems" value=""/>
	<input type="button" onclick="alert(newSelect1(parseInt(nbelemsInput.value, 10)))" value="par create element option"/>
	<input type="button" onclick="alert(newSelect2(parseInt(nbelemsInput.value, 10)))" value="par new Option"/><br/>
	ou démarrer un test de comparaison (attention 5 itérations creant de 1 à 10000 elements pour chacune des méthodes...
	<input type="button" onclick="compareBoth()" value="comparaison"/>
 
<div id="target">
 
</div>
<script type="text/javascript">
	var target = document.getElementById("target");
	var nbelemsInput = document.getElementById("nbelems");
	var clearTarget = function() {
		for(var i=0;i<target.childNodes.length; i++) {
			target.removeChild(target.childNodes[i])
		}
	};
	var newSelect1 = function(nb) {
		clearTarget();
		var select = document.createElement("select");
		target.appendChild(select);
		var dt = new Date().getTime();
		var j=0;
		while(j<nb) {
			var opt = document.createElement("option");
			opt.text = j;
			opt.value = j;
			select.options.add(opt);
			j++;
		}
		return (new Date().getTime() - dt);
	}
	var newSelect2 = function(nb) {
		clearTarget();
		var select = document.createElement("select");
		target.appendChild(select);
		var dt = new Date().getTime();
		var j=0;
		while(j < nb) {
			select.options[j] = new Option(j, j);
			j++;
		}
		return (new Date().getTime() - dt);
	}
	var compareBoth = function() {
		var nbLoops = 5;
		var maxPow = 5;
		var arr = [[],[]]
		for(var i=0;i<nbLoops;i++) {
			for(var j=0;j<maxPow;j++) {
				arr[0].push(newSelect1(Math.pow(10,j)));
				arr[1].push(newSelect2(Math.pow(10,j)));
			}
		}
		var counter = 0;
		var time = [0,0];
		var nbElements = [0,0];
		var str = "<table><tr><th>itération</th><th>nb options</th><th>par create element</th><th>par new option</th></tr>";
		for(var i=0;i<nbLoops;i++) {
			for(var j=0;j<maxPow;j++) {
				str += "<tr><td>" + i + "</td><td>" + Math.pow(10,j) + "</td><td>" + arr[0][counter] + "</td><td>" + arr[1][counter] + "</td></tr>";
				time[0] += (arr[0][counter])
				time[1] += (arr[1][counter])
				nbElements[0] += (Math.pow(10,j))
				nbElements[1] += (Math.pow(10,j))
				counter++;
			}
		}
		str+= "<tr><td colspan='2'>moyenne/elem</td><td>" + (time[0] / nbElements[0]) + "</td><td>" + (time[1] / nbElements[1]) + "</td></tr></table>";
		target.innerHTML = str;
	}
</script>
</body>

Mes conclusions sont que sous firefox, pas photo ! le new Option est largement plus rapide; sous ie (8), moins flagrant (de toute façon c'est lent... n'essayez pas la comparaison sans avoir demandé une seule itération...) mais la préférence va aussi au new Option. Pour chrome, c'est le createElement qui est beaucoup plus rapide !...

Si vous avez des remarques, commentaires ou suggestion...

**le_chomeur** · 21/07/2010, 15h38

as tu testé avec un cloneNode ?

**gwyohm** · 21/07/2010, 16h37

arf des nouvelles méthodes... bon ben je vais changer mon testeur, pour ajouter des methodes plus facilement...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<body>
	Saisir le nombre d elements à créer<input type="text" id="nbelems" value=""/>
	<input type="button" onclick="alert(_createElement(parseInt(nbelemsInput.value, 10)))" value="par create element option"/>
	<input type="button" onclick="alert(_newOption(parseInt(nbelemsInput.value, 10)))" value="par new Option"/>
	<input type="button" onclick="alert(_cloneNode(parseInt(nbelemsInput.value, 10)))" value="par cloneNode"/><br/>
	ou démarrer un test de comparaison (creant 1, 10, 100, 1000 et 10000 elements pour chacune des méthodes...
	<input type="button" onclick="compareAll()" value="comparaison"/>
 
<div id="target">
 
</div>
<script type="text/javascript">
	var target = document.getElementById("target");
	var nbelemsInput = document.getElementById("nbelems");
	var clearTarget = function() {
		for(var i=0;i<target.childNodes.length; i++) {
			target.removeChild(target.childNodes[i])
		}
	};
	var _createElement = function(nb) {
		clearTarget();
		var select = document.createElement("select");
		target.appendChild(select);
		var dt = new Date().getTime();
		var j=0;
		while(j<nb) {
			var opt = document.createElement("option");
			opt.text = j;
			opt.value = j;
			select.options.add(opt);
			j++;
		}
		return (new Date().getTime() - dt);
	}
	var _newOption = function(nb) {
		clearTarget();
		var select = document.createElement("select");
		target.appendChild(select);
		var dt = new Date().getTime();
		var j=0;
		while(j < nb) {
			select.options[j] = new Option(j, j);
			j++;
		}
		return (new Date().getTime() - dt);
	}
	var _cloneNode = function(nb) {
		clearTarget();
		var select = document.createElement("select");
		target.appendChild(select);
		var dt = new Date().getTime();
		var j=0;
		var modelNode = document.createElement("option");
		while(j < nb) {
			var opt = modelNode.cloneNode(false);
			opt.text = j;
			opt.value = j;
			select.options.add(opt);
			j++;
		}
		return (new Date().getTime() - dt);
	}
	var compareAll = function() {
		var methods = ["_createElement","_newOption","_cloneNode"]
		var nbLoops = 1;
		var maxPow = 5;
		var arr = new Array();
		var runners = [];
		var str = "<table border='1'><tr><th>itération</th><th>nb options</th>";
		for(var i=0;i<methods.length;i++) {
			arr.push([]);
			runners.push(window[methods[i]]);
			str += "<th>" + methods[i] + "</th>";
		}
		str += "</tr>";
		for(var i=0;i<nbLoops;i++) {
			for(var j=0;j<maxPow;j++) {
				for(var mIndex = 0;mIndex<methods.length; mIndex++) {
					arr[mIndex].push(runners[mIndex](Math.pow(10,j)));
				}
			}
		}
		var counter = 0;
		var time = [];
		var nbElements = 0;
		for(var mIndex = 0;mIndex<methods.length; mIndex++) {
			time[mIndex] = 0;
		}
		for(var i=0;i<nbLoops;i++) {
			for(var j=0;j<maxPow;j++) {
				str += "<tr>";
				str += "<td>" + i + "</td>";
				str += "<td>" + Math.pow(10,j) + "</td>";
				for(var mIndex = 0;mIndex<methods.length; mIndex++) {
					str +=  "<td>" + arr[mIndex][counter] + "</td>";
					time[mIndex] += (arr[mIndex][counter]);
				}
				nbElements += (Math.pow(10,j))
				str +=  "</tr>";
				counter++;
			}
		}
		str+= "<tr><td colspan='2'>moyenne/elem</td>";
		for(var mIndex = 0;mIndex<methods.length; mIndex++) {
			str +=  "<td>" + (time[mIndex] / nbElements) + "</td>";
		}
		str +=  "</tr></table>";
		target.innerHTML = str;
	}
</script>
</body>

... et mes résultats bien sur contestables sont :
IE8 : pas très clair, ca change en fonction de la volumétrie : jusqu'à 100, c'est cloneNode, puis new Option...
Firefox: Toujours le new Option largement en tête
Chrome: pas grand changement: createElement et cloneNode sont à peu près identiques

**tusssss** · 21/07/2010, 16h54

Et en faisant un test pour connaitre le navigateur pour pouvoir employer la méthode la plus rapide, est-ce qu'on est toujours plus rapide que la plus lente des solutions sur chacun des navigateurs?

C'est compliqué à formuler ma question...

**SpaceFrog** · 21/07/2010, 16h56

perso j'opte toujours pour le cloneNode qui de façon crossbrowser se comporte mieux ...

Créer des options dynamiquement

JavaScript

Discussions similaires

Partager

Partager