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