[SRC] Construire un grand tableau plus rapidement

**SpaceFrog** · 17/01/2008, 12h02

Suite à un post sur le forum, je vous propose un code pour contruire dynamiquement un tableau (balise <table>) plus rapidement

Dans cet exemple un tableau de 100 x 100 soit 10 000 cellules en moins de 3 secondes et demi

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
/***************************
* Speed Table By SpaceFrog *
**************************/
 
function BuildTable(DestObj,NrLines,NbrCells){
var BaliseTable=document.createElement('table');
var BaliseTbody=document.createElement('tbody');
 
for(i=0;i<NrLines;i++){
 new AddLine(BaliseTbody,NrLines,NbrCells, i)
 }
 
BaliseTable.appendChild(BaliseTbody);
DestObj.appendChild(BaliseTable);
document.close();
}
 
function AddLine(DestBody,NrLines,NbrCells, Contenu){
var NewLine=document.createElement('tr');
for(l=0;l<NbrCells;l++){
     new AddCells(NewLine,Contenu+'_'+l);
     }
DestBody.appendChild(NewLine)      
 
}
 
function AddCells(DestLine,contenu){
var newCell=document.createElement('td');
newCell.style.border="solid 1px gray";
newCell.appendChild(document.createTextNode(contenu));
DestLine.appendChild(newCell);
}
 
</script>
 
 
 
 
</head>
 
<body onload="BuildTable(document.body,100,100)">
 
 
</body>
 
</html>

**E.Bzz** · 17/01/2008, 12h34

Puisque tu es dans l'optimisation, remplacer

Code :

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

newCell.style.border="solid 1px gray";

par une redéfinition CSS des <td> (au niveau global, et non pour chaque) fera peut-être gagner quelques ms supplémentaires

(et quelques octets en poids)

A+

**SpaceFrog** · 17/01/2008, 17h16

oui un css au niveau de la page ... ou un className ... ferait sans doute encore gagner quelques centièmes ...
Mais déja passer de 25 secondes à même pas 3.5 ...

**E.Bzz** · 17/01/2008, 17h31

Envoyé par SpaceFrog

Mais déja passer de 25 secondes à même pas 3.5 ...

Loin de moi l'idée de minimiser l'efficacité de la solution

**SpaceFrog** · 17/01/2008, 20h45

Pour le fun:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type='text/css'>
td {height:5px;
    width:5px;}
    </style> 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
/***************************
* Speed Table By SpaceFrog *
**************************/
 
function BuildTable(DestObj,NrLines,NbrCells){
var BaliseTable=document.createElement('table');
BaliseTable.style.borderCollapse="collapse";
var BaliseTbody=document.createElement('tbody');
 
for(i=0;i<NrLines;i++){
 new AddLine(BaliseTbody,NrLines,NbrCells, i)
 }
 
BaliseTable.appendChild(BaliseTbody);
DestObj.appendChild(BaliseTable);
document.close();
}
 
function AddLine(DestBody,NrLines,NbrCells, Contenu){
var NewLine=document.createElement('tr');
for(l=0;l<NbrCells;l++){
     new AddCells(NewLine,Contenu*2+l);
     }
DestBody.appendChild(NewLine)      
 
}
 
function AddCells(DestLine,contenu){
var newCell=document.createElement('td');
newCell.style.backgroundColor="rgb("+contenu+",50,100)";
newCell.appendChild(document.createTextNode("   "));
DestLine.appendChild(newCell);
}
 
</script>
 
 
 
 
</head>
 
<body onload="BuildTable(document.body,100,100)">
 
 
</body>
 
</html>

ou encore :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type='text/css'>
td {height:5px;
    width:5px;}
    </style> 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
/***************************
* Speed Table By SpaceFrog *
**************************/
 
function BuildTable(DestObj,NrLines,NbrCells){
var BaliseTable=document.createElement('table');
BaliseTable.style.borderCollapse="collapse";
var BaliseTbody=document.createElement('tbody');
 
for(i=0;i<NrLines;i++){
 new AddLine(BaliseTbody,NrLines,NbrCells, i)
 }
 
BaliseTable.appendChild(BaliseTbody);
DestObj.appendChild(BaliseTable);
document.close();
}
 
function AddLine(DestBody,NrLines,NbrCells, Contenu){
var NewLine=document.createElement('tr');
for(l=0;l<NbrCells;l++){
     new AddCells(NewLine,Contenu,l);
     }
DestBody.appendChild(NewLine)      
 
}
 
function AddCells(DestLine,contenu1,contenu2){
var newCell=document.createElement('td');
newCell.style.backgroundColor="rgb("+contenu1+","+contenu2*2+","+(255-contenu1)+")";
newCell.appendChild(document.createTextNode("   "));
DestLine.appendChild(newCell);
}
 
</script>
 
 
 
 
</head>
 
<body onload="BuildTable(document.body,100,100)">
 
 
</body>
 
</html>

**SpaceFrog** · 16/04/2009, 10h14

Suite à la découverte que le cloneNode est plsu rapide que le createElement, voici une petit améliortaion qui permet de gagner encore un peu de temps à la création:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
/***************************
* Speed Table By SpaceFrog *
**************************/
var xtable=document.createElement('table');
var xtbody=document.createElement('tbody');
var xtr=document.createElement('tr');
var xtd=document.createElement('td');
var xtxt=document.createTextNode('');
 
 
function BuildTable(DestObj,NrLines,NbrCells){
var BaliseTable=xtable.cloneNode(false);
var BaliseTbody=xtbody.cloneNode(false);
 
for(i=0;i<NrLines;i++){
 new AddLine(BaliseTbody,NrLines,NbrCells, i)
 }
 
BaliseTable.appendChild(BaliseTbody);
DestObj.appendChild(BaliseTable);
document.close();
}
 
function AddLine(DestBody,NrLines,NbrCells, Contenu){
var NewLine=xtr.cloneNode(false);
for(l=0;l<NbrCells;l++){
     new AddCells(NewLine,Contenu+'_'+l);
     }
DestBody.appendChild(NewLine)      
 
}
 
function AddCells(DestLine,contenu){
var texte=xtxt.cloneNode(false);
var newCell=xtd.cloneNode(false);
newCell.style.border="solid 1px gray";
texte.data=contenu;
newCell.appendChild(texte);
DestLine.appendChild(newCell);
}
 
</script>
 
 
 
 
</head>
 
<body onload="BuildTable(document.body,100,100)">
 
 
</body>
 
</html>

**le_chomeur** · 16/04/2009, 10h21

effectivement cloneNode est plus rapide

et pour finir , tu peux faire une boucle inversé avec un while

et la boucle sera bouclé ^^

**Gatsu35** · 18/02/2010, 22h36

avec code de spacefrog :
console.time('test SpaceFrog');
BuildTable(document.body,100,100);
console.timeEnd('test SpaceFrog');
==>544ms

Mais il n'y a rien de mieux que la toute puissance des chaines de caractères

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
 
/***************************
* Speed Table By Gatsu35  *
**************************/
 
function BuildTable(DestObj,NrLines,NbrCells){
    var div = document.createElement('div');
    var array = [];    
    array.push('<table><tbody>');
     for (var i=0; i<NrLines; i++) {
       array.push('<tr>');
       var cells= [];
        for(var j=0; j<NbrCells; j++) {
            array.push('<td style="border:1px solid gray">'+i+'_'+j+'</td>');
        }
       array.push('</tr>');
    }
    array.push('</tbody></table>');
    div.innerHTML = array.join('');
    DestObj.appendChild(div.getElementsByTagName('table')[0]);    
}
 
 
console.time('test SpaceFrog');
BuildTable(document.body,100,100);
console.timeEnd('test SpaceFrog');

==> 325ms