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

Citation:

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

le_chomeur · 19/02/2010, 09h02

Salut Gatsu35 effctivement sujet déja évoqué , innerHTML est plus rapide que le dom ;-)

danielhagnoul · 20/02/2010, 22h01

SPaceFrog devient le « Speedy Gonzalez » de la table !

Adopté !

17/01/2008, 17h16	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 120 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 120 Points : 45 270 Points : 45 270	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 ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/04/2009, 10h21	#7
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 563 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 563 Points : 4 025 Points : 4 025	effectivement cloneNode est plus rapide et pour finir , tu peux faire une boucle inversé avec un while et la boucle sera bouclé ^^ __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	00

19/02/2010, 09h02	#9
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 563 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 563 Points : 4 025 Points : 4 025	Salut Gatsu35 effctivement sujet déja évoqué , innerHTML est plus rapide que le dom ;-) __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	00

20/02/2010, 22h01	#10
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	SPaceFrog devient le « Speedy Gonzalez » de la table ! Adopté ! __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

17/01/2008, 12h34	#2
E.Bzz Responsable Modération Inscription : janvier 2007 Messages : 9 315 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Secteur : Finance Informations forums : Inscription : janvier 2007 Messages : 9 315 Points : 15 609 Points : 15 609	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+
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email