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