Créer des options dynamiquement
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:
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...
