[IE6] Optimiser cr�ation des �l�ments

**Arnaud F.** · 25/10/2009, 09h26

Bonjour,

j'ai un petit souci avec le moteur Javascript de IE6...

En effet, je souhaite cr�er une dizaine de milliers de cellules de tableau (td), j'ai donc test� plusieurs m�thodes et j'aimerai savoir s'il y en a une plus optimale encore.

Pourquoi? Parce que IE6 est super lent. L� ou Chrome / FF mettent 1 � 3 secondes, IE en met une bonne vingtaine.

Je suis pass� par Prototype au d�part mais j'ai vite abandonn�, plus d'une minute sur IE

Voici donc la solution que j'ai adopt� :

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
 
var table = document.createElement('table');
var tbody = document.createElement('tbody');
 
table.appendChild(tbody);
 
var trTemplate = document.createElement('tr');
var tdTemplate = document.createElement('td');
 
for(var i = 0; i < 100; i++) {
	var tr = trTemplate.cloneNode(false);
	tr.id = i;
 
	for(var j = 0; j < 500; j++) {
		var td = tdTemplate.cloneNode(false);
		td.id = i + '_' + j;
		td.innerText = i + '_' + j;
 
		tr.appendChild(td);
	}
	tbody.appendChild(tr);
}
document.body.appendChild(table);

Ceci n'est qu'un exemple simplifi� bien s�r mais refl�te bien ma probl�matique.

J'ai fais le test en faisant un createElement par boucle, mais c'est se tirer une balle dans le pied. C'est donc comme �a que je suis venu a utiliser cloneNode.

Petites pr�cisions :

me dite pas de changer de navigateur, vous perdez votre temps, c'est impossible
A faire en JS car le faire en PHP mettrait le serveur � genou �tant donn� qu'� terme, il y aura une bonne dizaine de connexions simultan�es au serveur

P.S : Test Chrome : 700ms ; Test IE8 : 8 secondes

**Bovino** · 25/10/2009, 10h09

Salut !

De m�moire, il me semble que inserRow et insertCell sont plus optimis�s que createElement pour les tables.

Invit� · 25/10/2009, 10h55

jour

je vient d'essayer de cette facon

amd x2 4200+

sur ff j'obtient environ 6 secondes sur ie 8 dix secondes

pas essayer sur ie 6 j'ai ie texter et sa a bugue

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" type="text/javascript">
 
function ttb(){
var tbs=document.getElementById("tabsee")
for(var i=0;i<100;i++){
tbs.insertRow(0)
tbs.rows[0].id=i
 
for(var j = 0; j < 500; j++) {
tbs.rows[0].insertCell(j)
tbs.rows[0].cells[j].id= i + '_' + j;
tbs.rows[0].cells[j].appendChild(document.createTextNode(i + '_' + j));
}
}
}
</script>
</head>
<body onload='ttb()'>
<table id='tabsee'>
</table>
</div>
</div>
</body>
</html>

**Arnaud F.** · 25/10/2009, 12h21

Envoy� par Bovino

Salut !

De m�moire, il me semble que inserRow et insertCell sont plus optimis�s que createElement pour les tables.

Salut !

J'ai essay� aussi, mais d�trompe toi, c'est largement pire avec insert[Row|Cell]. La preuve, j'ai jamais eu la patience d'attendre la fin de l'ex�cution du script (

), soit > 2 minutes...

Pour info : j'ai utilis� le code suivant :

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
var table = document.createElement('table');
var tbody = document.createElement('tbody');
 
table.appendChild(tbody);
 
var trTemplate = document.createElement('tr');
var tdTemplate = document.createElement('td');
//tdTemplate.innerText = '1';
var deb = new Date();
 
for(var i = 0; i < 100; i++) {
        var tr = tbody.insertRow(i);
	tr.id = i;
 
	for(var j = 0; j < 500; j++) {
                var td = tr.insertCell(j);
		td.id = i + '_' + j;
		td.innerText = i + '_' + j;
	}
}
document.body.appendChild(table);

**Arnaud F.** · 25/10/2009, 12h48

Envoy� par mekal

jour

je vient d'essayer de cette facon

amd x2 4200+

sur ff j'obtient environ 6 secondes sur ie 8 dix secondes

pas essayer sur ie 6 j'ai ie texter et sa a bugue

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" type="text/javascript">
 
function ttb(){
var tbs=document.getElementById("tabsee")
for(var i=0;i<100;i++){
tbs.insertRow(0)
tbs.rows[0].id=i
 
for(var j = 0; j < 500; j++) {
tbs.rows[0].insertCell(j)
tbs.rows[0].cells[j].id= i + '_' + j;
tbs.rows[0].cells[j].appendChild(document.createTextNode(i + '_' + j));
}
}
}
</script>
</head>
<body onload='ttb()'>
<table id='tabsee'>
</table>
</div>
</div>
</body>
</html>