Performance JavaScript IE
Bonjour à toutes et à tous,
J'ai créé un objet javascript qui permet de manipuler un select.
L'objet est défini de la façon suivante:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| function MonSelect(id) {
this.id;
this.array; // this.array est un Array d'oBjet composé d'enregistrement (id, valeur)
this.toHtml = function() {
return '<select id="'+this.id+'"></select>';
};
this.initByArray = function(arr) {
this.array=arr;
}
this.fillList = function () {
var ctrl=document.getElementById(this.id);
for (var i=0,len=this.array.length; i<len; i++ ){
var item=this.array[i];
ctrl.options[ctrl.length] = new Option(item.valeur, item.id);
}
}
} |
Mon objet javascript est affiché dans une page html grâce à getHtml(), puis rempli sur une action javascript (clic sur un lien, sur un bouton, en fonction) en passant un tableau de couple (valeur, id) qui peut comporter entre 100 et plusieurs milliers d'élement (initByArray()) puis en remplissant le DOM (fillList())
Tout fonctionne correctement, dans IE 6, 7, 8, etc... et FF, Chrome, Safari, Opéra...
SAUF QUE... pour TOUS les IE... lorsqu'on traite des Array de plusieurs milliers d'éléments, c'est affreusement lent... Mais quand je dis affreusement lent, pour certains tableaux, on peut même aller plus loin et dire que IE freeze pendant plusieurs minutes. Donc on se retrouve avec un IE qui est freezé, avec le message imbuvable de "Internet Explorer ne répond plus" et ça prend plusieurs minutes avant d'avoir un retour à la normal, lorsque le chargement est traité...
Un débuggage montre que c'est le "ctrl.options[ctrl.length] = new Option(item.valeur, item.id);" qui est trop lourd pour le moteur javascript des IE.
Alors que sous FF, Chrome, Opéra, Safari, le résultat est à peine plus lent pour des milliers d'éléments que pour des centaines.
Je sais que le moteur de IE est pas ce qu'on pourrait appeler une flèche (et que les performances sont plus que catastrophiques), mais lorsqu'on compare à FF, Chrome, etc... c'est flagrant.
Alors que ça plante tout simplement dans IE, dans les autres aucun problème.
Avec vous expérimenté ce type de fonctionnement de javascript dynamique sur DOM? Vu que dans IE c'est la merde, quelle a été votre workaround?
J'ai lu qu'il était impossible de faire du multithreading avec javascript, mais que certains scripts permettent de simuler le multithreading. En avez vous testé les possibilité? Vu que le multi-threading simulé en javascript n'en n'est pas vraiment, est-ce que ça marche réellement sous IE?
Il n'y a pas de solution avec ce code là sous IE, car le navigateur a un moteur javascript mauvais de chez mauvais... donc il faudrait que je trouve un workaround pour le remplissage dynamique qui ne fasse pas trop de bobo au pauvre fragile moteur javascript de IE (conçu avec les pieds).
Merci d'avance pour vos réponses
Cordialement
Goj'
edit: j'ai essayé avec la méthode
Code:
1
2
| var option = document.createElement('option');
document.getElementById(idSelect).add(option); |
mais aussi avec document.getElementById(idSelect).appendChild(option)et ça ne change rien, c'est juste IE qui n'arrive pas à ajouter correctement une option à un select de façon véloce.
re-edit: je ne peux pas utiliser JQuery, du coup ce type de fonctionnement ne peut pas être mis en place
http://stackoverflow.com/questions/9...select-element
