dessiner un très grand tableau + optimisation en temps

**identifiant_bidon** · 17/01/2008, 10h43

Bonjour

Voici mon problème, je dois dessiner un tableau de 100 lignes pour 100 colonnes. Le hic c'est que l'affichage prend enormément de temps (le tableau au final est bien dessiné mais il faut attendre plus de 30 secondes a peu près)

Pour dessiner mon tableau, l'algo utilisé est tout con. Du style

Code :

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

1
2
3
4
5
6
7
8
9
<table>
for (....)
<tr>
for (... )
<td></td>
fin du 2ème for
</tr>
fin du 1er for
</table>

Voila je cherche deséspérement a faire en sorte que ca aille plus vite. Si quelqu'un a une idée ...
Merci

**MasterOfChakhaL** · 17/01/2008, 11h06

Salut,

Qu'est-ce qui te pose problème?

C'est le temps de chargement de ta page ou bien le temps d'affichage du tableau?

Dans le premier cas, a part améliorer les performances du serveur, je ne vois pas trop ce que tu peux faire.

Dans le second cas, l'affichage d'un tableau utilise un algorithme pour décider de la largeur des colonnes.
Par défaut, l'algorithme a besoin de faire au moins deux passage sur les données de ton tableau pour calculer au mieux la largeur (en essayant de respecter les width définis).
Il y a un algorithme plus simple qui ne nécessite qu'un passage et qui peut commencer à dessiner ton tableau dès que la première ligne a été reçue par le navigateur.

Des infos plus précises dans la norme css: http://www.w3.org/TR/CSS21/tables.html#width-layout

**identifiant_bidon** · 17/01/2008, 11h15

C'est sur le temps d'affichage du tableau que ca va pas. Je vais etudier ta 2ème proposition. Merci

**identifiant_bidon** · 17/01/2008, 11h30

J'ai donc rajouté un style: table-layout à fixed mais il n'y aquasiment aucun changement. Avec IE, pour dessiner un tableau de 10 000 cases, je mets 25 secondes

Code :

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

<table id="table_complexe" style="table-layout: fixed;" ....

**MasterOfChakhaL** · 17/01/2008, 11h37

Re,

Si tu as bien lu le lien que je t'ai donné dans mon autre message, tu as du voir qu'il fallait absolument donner une largeur à toute les cellules de la première ligne .
Sinon, l'algorithme utilisé sera forcément l'algorithme automatique propre à chaque navigateur.

Après ce que je te raconte, c'est de la théorie. Je n'ai jamais eu à faire des tableaux suffisament lourd pour avoir à utiliser ces techniques...

Bonne chance!

**SpaceFrog** · 17/01/2008, 11h43

si tu peux construire le tableau coté php ...

**MasterOfChakhaL** · 17/01/2008, 11h53

Envoyé par SpaceFrog

si tu peux construire le tableau coté php ...

J'étais parti du principe que le tableau était construit côté serveur, mais c'est vrai que la question se pose.

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

Coté javascript, voici ce que j'ai pu faire de plus rapide ...

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
<script type="text/javascript">
 
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)
 }
 
BaliseTable.appendChild(BaliseTbody);
DestObj.appendChild(BaliseTable);
 
 
}
 
function AddLine(DestBody,NrLines,NbrCells){
var NewLine=document.createElement('tr');
for(l=0;l<NbrCells;l++){
     new AddCells(NewLine);
     }
DestBody.appendChild(NewLine)      
 
}
 
function AddCells(DestLine){
var newCell=document.createElement('td');
newCell.style.border="solid 1px gray";
newCell.appendChild(document.createTextNode('coucou'));
DestLine.appendChild(newCell);
}
 
</script>
 
 
 
 
</head>
 
<body onload="BuildTable(document.body,100,20)">
 
 
</body>
 
</html>

Traitement de l'ordre de 3 secondes ...faudrait Benchmarquer ...

testé chez moi à 3.45 secondes ... sur IE ...
presque une demi seconde de mois avec FFX

**identifiant_bidon** · 18/01/2008, 10h43

En effet SpaceFrog, ton code est vraiment très performant. Il m'affiche mon tableau (100x100) 5 fois plus vite. Merci beaucoup.

Je me suis permis de le reprendre et d'en faire quelques modifications en fonction de mon besoin. Le hic est qu'au lieu d'ecrire coucou dans mes cases, je voudrais qu'il n'y ai rien

Code :

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

newCell.appendChild(document.createTextNode('coucou'));

Si je mets ceci à la place :

Code :

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

	newCell.appendChild(document.createTextNode(' '));

Le quadrillage est bien dessiné sous IE mais pas avec FIREFOX !!!!!!

**SpaceFrog** · 18/01/2008, 10h45

mets un css ...

Code :

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

1
2
table{border-collapse:collapse;}
td {border: solid 1px #000000;}

**identifiant_bidon** · 18/01/2008, 11h00

Ok ça marche nickel. Interessant ce border-collapse, je ne le connaissais pas...

merci

**SpaceFrog** · 18/01/2008, 11h15

Juste pour le fun :

http://www.developpez.net/forums/sho...wpost&t=475149

les deux derniers codes

dessiner un très grand tableau + optimisation en temps

HTML

Discussions similaires

Partager

Partager