grosse Tabelle | performante Darstellung

[heinetz]

Hallo Forum,

wie lassen sich eurer Meinung/Erfahrung nach grosse Tabellen (1000 Zeilen/
30 Spalten) am performantesten anzeigen. In den Zellen wird z.T. Hypertext
und z.T. Icons (also kleine Images) dargestellt.

Die Tabelle, die bei mir zur Anwendung kommt, ist Teil eines
selbstentwickelten CMS. Zur Zeit wird die Tabelle ohne Rücksicht
auf Performance aufgebaut. Ein Reload dauert bis zur vollständigen
Anzeige der Tabelle etwa 60 Sekunden.

Die Tabelle liesse sich ja auch mit (DOM) Javascript erzeugen,
statt sie direkt als Tabelle auszugeben.

Macht sich das wohl bemerkbar ?

danke für Tipps und

beste gruesse,
heinetz

[suit]

wie lassen sich eurer Meinung/Erfahrung nach grosse Tabellen (1000 Zeilen/
30 Spalten) am performantesten anzeigen. In den Zellen wird z.T. Hypertext
und z.T. Icons (also kleine Images) dargestellt.

Die Tabelle liesse sich ja auch mit (DOM) Javascript erzeugen,
statt sie direkt als Tabelle auszugeben.

Macht sich das wohl bemerkbar ?

ja, negativ - javascript ist in den meisten fällen um einiges langsamer als der sgml- oder xml-parser des browsers

verwende ordentlich strukturiertes html und verzichte auf 1000x <img src="icon1.png" /> und verwende anstelle dessen hintergrundbilder die du über css aufgrund gemeinsamer eigenschaften einbindest - das spart performance beim rendern der tabelle

[heinetz]

erstmal, tausend Dank für Deine Einschätzung !

ja, negativ - javascript ist in den meisten fällen um einiges langsamer als der sgml- oder xml-parser des browsers

... aber ich habe im Moment den gegenteiligen Eindruck. Ich habe die
in einer PHP-Schleife ursprünglich direkt erzeugte Tabelle in ein
JS-Array geschrieben und dann onload aus diesem Array eine Tabelle
erzeugt:

  
<script language="JavaScript" type="text/javascript">  
addLoadEvent(showstructure);  
function showstructure ()  
                      {//alert("showstructure()");  
                       //structureObj = document.getElementById("structure_ul");  
                       structureObj = document.getElementById("structure_table");  
                       for (i=0; i<structureA.length; i++)  
                          {  
                           var newLI = document.createElement("li");  
                           var newLIText = document.createTextNode(structureA[i]);  
                           newLI.appendChild(newLIText);  
  
                           var newTR = document.createElement("tr");  
  
                           for (e=0; e<20; e++)  
                              {  
                               var newTD = document.createElement("td");  
                               if (e==0) var newTDText = document.createTextNode(structureA[i][\'link_title\']);  
                               else var newTDText = document.createTextNode("XXX");  
                               newTD.appendChild(newTDText);  
                               newTR.appendChild(newTD);  
                              }  
  
                           //structureObj.appendChild(newLI);  
                           structureObj.appendChild(newTR);  
                          }  
                      }  
</script>  

natürlich ist die Tabelle sehr viel einfacher aufgebaut, als das Original.
Es fehlen die Icons und sämtliche 'class'-Attribute. Allerdings ist diese
Tabelle in beeindruckenden 6(!) Sekunden vollständig dargestellt, wärend
das Original auch ohne Icons immernoch 40 Secunden läd ... Aber um das
wirklich vergleichen zu können, werde ich die JS-Tabelle noch ein bisschen
weiter bauen ...

verwende ordentlich strukturiertes html und verzichte auf 1000x <img src="icon1.png" /> und verwende anstelle dessen hintergrundbilder die du über css aufgrund gemeinsamer eigenschaften einbindest - das spart performance beim rendern der tabelle

ja das werde ich auch mal versuchen ...

beste gruesse,
heinetz

[suit]

natürlich ist die Tabelle sehr viel einfacher aufgebaut, als das Original.
Es fehlen die Icons und sämtliche 'class'-Attribute. Allerdings ist diese
Tabelle in beeindruckenden 6(!) Sekunden vollständig dargestellt, wärend
das Original auch ohne Icons immernoch 40 Secunden läd ... Aber um das
wirklich vergleichen zu können, werde ich die JS-Tabelle noch ein bisschen
weiter bauen ...

unterscheide bitte zwischen generieren, ladezeit, rendern/reflow usw

benötigt php die 40 sekunden um die tabelle aus der datenbank zu lesen?
benötigt deine internetverbindung 40 sekunden um die daten zu übertragen?
benötigt der browser 40 sekunden um die tabelle zu rendern?

deine 20-zeilen funktion ist natürlich schneller übertragen als 1000 zeilen html - ich tippe auf die zweite möglichkeit ;)

die frage ist, ob du schon alle benötigten daten mitüberträgst oder einfach nur eine tabelle ohne werte benötigst

[heinetz]

unterscheide bitte zwischen generieren, ladezeit, rendern/reflow usw

benötigt php die 40 sekunden um die tabelle aus der datenbank zu lesen?
benötigt deine internetverbindung 40 sekunden um die daten zu übertragen?
benötigt der browser 40 sekunden um die tabelle zu rendern?

deine 20-zeilen funktion ist natürlich schneller übertragen als 1000 zeilen html - ich tippe auf die zweite möglichkeit ;)

die frage ist, ob du schon alle benötigten daten mitüberträgst oder einfach nur eine tabelle ohne werte benötigst

sorry, ich ging bis eben davon aus, dass der Browser die Zeit benötigt,
die Tabelle darzustellen und habe die gesamte durch php erzeugte Tabelle
per '<!-- -->' auskommentiert. So wird sie koplett zum Browser geschickt,
ohne dass der sie darstellen muss und das alleine dauert schon 25
Sekunden. Ich schaffe erstmal andere Testbedingungen ...

bis hierher erstmal vielen Dank

beste gruesse,
heinetz

[Kai345]

[latex]Mae  govannen![/latex]

sorry, ich ging bis eben davon aus, dass der Browser die Zeit benötigt,
die Tabelle darzustellen und habe die gesamte durch php erzeugte Tabelle
per '<!-- -->' auskommentiert. So wird sie koplett zum Browser geschickt,
ohne dass der sie darstellen muss und das alleine dauert schon 25
Sekunden. Ich schaffe erstmal andere Testbedingungen ...

Benutzt du Ausgabepufferung?

Cü,

Kai

[heinetz]

Benutzt du Ausgabepufferung?

Cü,

Ich glaube, dass das in meinem Fall eher irrelevant ist. Ich
fülle für den Seitenaufbau über eine komplexe Logik eine Variable
$content_str, die ich am Ende meines Skripts ausgebe. Die Tabelle
wird mit verschiedenen Loops in die Variable $structure_table
geschrieben, die irgendwann an $content_str gehängt wird.

$content_str.=$structure_table;
.... und die Seite ist MIT Tabelle in 60 Sekunden aufgebaut.

$content_str.="<!--".$content_str."-->";
.... und die Seite ist OHNE Tabelle nach 25 Sekunden aufgebaut.

//$content_str.=$structure_table;
.... und die Seite ist OHNE Tabelle in weniger als 2 Sekunden da.

Ich teste das gerade unter erschwerten Bedingungen auf meinem
Testsystem (ein alter W2K-Server, der in meinem Büro hinter einem
DSL-Router per dyndns von aussen erreichbar ist aber natürlich keine
vernünftige Upload-Geschwindigkeit hat) Dennoch ist der Seitenaufbau
unbefriedigend langsam, wenn ich das lokal teste.

Richtig zum Tragen kommt das dadurch, dass die in der Tabelle
daragesellten Icons als Buttons dienen, mit denen man Inhalte
der Tabelle ändert. Sprich: Ein Klick sorgt für ein DB-Update
und die Tabelle muss neu geladen werden ;(

Ergo:
-----
Alle Daten der Tabelle erstmal in JS-Variablen zu schreiben,
die Tabelle selbst dann so 'sparsam', wie möglich per JS zu
erzeugen spart eine Menge Code (das wirkt sich in meinem
Versuch bisher äusserst positiv aus). Der positive Nebeneffekt,
dass die Daten in JS vorliegen ist, dass dann Ajax-Funktionalitäten
denkbarer werden.

schönen Abend und

vielen dank,
heinetz

[suit]

$content_str.=$structure_table;
.... und die Seite ist MIT Tabelle in 60 Sekunden aufgebaut.

$content_str.="<!--".$content_str."-->";
.... und die Seite ist OHNE Tabelle nach 25 Sekunden aufgebaut.

blöde frage, ist die tabelle wohlgeformt oder valide? auch invalider code kann den parser und seine fehlerkorrektur (wo unvollständige elemente korrigiert gehören) zur verzweiflung bringen

[heinetz]

blöde frage, ist die tabelle wohlgeformt oder valide? auch invalider code kann den parser und seine fehlerkorrektur (wo unvollständige elemente korrigiert gehören) zur verzweiflung bringen

danke für den Tipp bzw. "die blöde Frage" aber, daher dass die per
"<!-- -->" in HTML auskommentierte Tabelle alleine etwa eine halbe
Minute braucht, bis sie geladen ist, also ohne dass der Browser sie
darstellt (ich gehe davon aus, dass er sie nicht deshalb korrigieren
muss).

Diese halbe Minute kommt mir schon arg lang vor.

Wenn ich mir den Inhalt der Tabelle per SQl-Statement von PhpMyAdmin
anzeigen lasse, kommt das der Darstellung relativ nahe:

Eine Tabelle mit 1000 Zeilen und pro Zeile etwa 5 png-Buttons.

... ist die Darstellung ähnlich schwerfällig.

beste gruesse,
heinetz

[suit]

Eine Tabelle mit 1000 Zeilen und pro Zeile etwa 5 png-Buttons.

... ist die Darstellung ähnlich schwerfällig.

dann versuche das problem zu isolieren - die buttons die in jeder zeile eingefügt werden oder das rendern der tabelle selbst?

wenn du die buttons als hintergrundbilder (1x per css definiert) einfügst, gehts dann schneller?

[Kai345]

[latex]Mae  govannen![/latex]

structureObj = document.getElementById("structure_table");

structureObj.appendChild(newTR);

Wundert mich nicht. Du hängst bei jedem Schleifendurchgang den erzeugten Code an das umgebende Element an, daher muß der Browser die gesamte Seite auch jedes Mal neu rendern.

Wahrscheinlich hast du auch im PHP-Code für jeden Schleifendurchgang den Code direkt ausgegeben?

Mögliche Lösung: Code erst komplett (oder zumindest in größeren Abschnitten) erzeugen und erst danach ins Dokument einhängen.

Cü,

Kai