Discussion :

[gojira]

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 :

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
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 :

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

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

[TheGwy]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
this.fillList = function () {
		var ctrl = document.getElementById(this.id),
			frag = document.createDocumentFragment(),
			item, option;
		for (var i=0,len=this.array.length; i<len; ++i){
 
			item = this.array[i];
			option = document.createElement('option');
			option.id = item.id;
			option.appendChild(document.createTextNode(item.valeur));
			frag.appendChild(option);
		}
		ctrl.appendChild(frag);
	}

J'obtiens comme performance ceci :

IE6 : Insertion de 8040 options en 1913ms
IE9 : Insertion de 8040 options en 584ms
Firefox : Insertion de 8040 options en 693ms
Chrome : Insertion de 8040 options en 98ms
Opera : Insertion de 8040 options en 201ms

Je pense que c'est largement suffisant pour n'importe quelle utilisation.

[gojira]

énooooooooooooorme...
Un super grand merci . Ca marche nickel
Génial... je connaissais pas du tout ces Objets javascript.

Merci merci merci

Ca divise par 10 le temps de chargement...

Champion TheGwy!!!!! Si j'avais le temps je t'érigerais un autel pour te vouer un culte... MERCIIIIIIIIIIII