dessiner un très grand tableau + optimisation en temps

Version imprimable

17/01/2008, 09h43
identifiant_bidon

dessiner un très grand tableau + optimisation en temps
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:

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
17/01/2008, 10h06
MasterOfChakhaL

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
17/01/2008, 10h15
identifiant_bidon

C'est sur le temps d'affichage du tableau que ca va pas. Je vais etudier ta 2ème proposition. Merci :)
17/01/2008, 10h30
identifiant_bidon

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 :cry:

Code:

<table id="table_complexe" style="table-layout: fixed;" ....
17/01/2008, 10h37
MasterOfChakhaL

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!
17/01/2008, 10h43
SpaceFrog

si tu peux construire le tableau coté php ...
17/01/2008, 10h53
MasterOfChakhaL

Citation:

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.

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

Code:

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

18/01/2008, 09h43
identifiant_bidon

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:

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

Si je mets ceci à la place :

Code:

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

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

mets un css ...

Code:

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

18/01/2008, 10h00
identifiant_bidon

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

merci
18/01/2008, 10h15
SpaceFrog

Juste pour le fun :

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

les deux derniers codes ;)