Performance Tabellenaufbau im IE

**Shadun** · 24.05.2006, 08:48

1.) X-Debug

2.)Ich glaube nicht, dass dein Projekt so groß und aufwändig ist, dass es so viel Zeit zu laden braucht, zumindest im PHP Code; wenn du kein Problem damit hast stell doch die Seite mal hier rein, dann können wir uns das ma genauer angucken

**DifficultChild** · 24.05.2006, 09:12

naja, wie gesagt: 130 kb und rund 2000 Zeilen Code
wäre zuviel, es hier zu posten. ausserdem wäre es nicht wirklich nachzuvollziehen, da dieses Script ein TinyButStrong-Element ist, welches bei Anforderung über ein Admin-UI vor eine zu konfigurierende Seite geschoben wird.
was ich mit dem Tool meinte, ist eher, ob es etwas gibt, womit man die Ausgabe im Browser zeitlich nachvollziehen kann.
Die Serverlaufzeit habe ich gerade mit Hilfsvariablen am Anfang und Ende mal mittels time() ausgeben lassen, dort taucht das problem nicht auf, es ist also scheinbar ein reines browserproblem.
jetzt überlege ich, ob es in so einem fall was bringt, wenn ich mit

Code:

ob_start

und

Code:

ob_get_contents

etwas erreichen kann.
Nur: sollte es wirklich das Problem mit dem Aufbau der Farbtabelle mit den 216 Zellen sein, dann dürfte ob_get_contents ja auch nix bringen, da dort der String ja letztlich den gleichen Code enthält, den ich jetzt schon habe, nur dass er eben erst dann vom Browser interpretiert wird, wenn er komplett vorliegt.
Ich poste mal wenigstens den betreffenden Code der Tabelle:
[PHP-Code wegen überbreite entfernt]

Sorry, dass ihr querscrollen müsst, aber damit es etwas besser lesbar ist, hab ich keine zusätzlichen Umbrüche reingemacht. Wir ihr sehen könnt, kommt noch JS-Funktionen zum Einsatz, die den Wert in ein Formular-Element zurückschreiben (wird später beim Absenden des Formulars ausgelesen und als kompletter CSS-Tag in der DB abgelegt) und die den Layer anschliessend wieder in den Hintergrund schiebt, also unsichtbar macht.
Wie gesagt, ich vermute das Problem in der Tabelle, früher war es doch auch schon so, dass IE mit der Tabellendarstellung Probleme hatte, ich habe ne ganze Weile nichts mehr gemacht mit solchen Tabellen, deshalb weiss ich nicht, ob sich da beim IE in der Zwischenzeit was verbessert hat.

Nachtrag: Mir kam grad während des schreibens die Idee, einfach mal testweise den kompletten Layer zu entfernen.
Ladezeit Firefox = 3 Sekunden und IE = 3 Sekunden
Meine neue Frage muss nun lauten:
Wie kann ich also diesen optimieren, dass ich sowohl 216 Farbfelder habe, als auch eine kurze Ladezeit?

**wahsaga** · 24.05.2006, 09:24

Original geschrieben von DifficultChild
Sorry, dass ihr querscrollen müsst, aber damit es etwas besser lesbar ist, hab ich keine zusätzlichen Umbrüche reingemacht.

Sorry, dass ich's deshalb entfernt habe, und dich bitten muss, es im Zweifelsfalle noch mal zu posten - ordentlich.

Keiner hier hat Lust, wegen ein paar Zeilen PHP-Code, die du nicht umbrechen magst, in allen Beiträgen auf einer Seite ständig hin- und her Scrollen zu müssen, um die Postinginhalte lesen zu können.

**combie** · 24.05.2006, 09:33

Wie kann ich also diesen optimieren, dass ich sowohl 216 Farbfelder habe, als auch eine kurze Ladezeit?

Alternativ zur Tabelle:
Mach dir z.B. einen Imagebutton mit einem jpg(oder so) welches dein Farbfeld enthält. Der Browser liefert dir die x&y Koordinaten in das Bild.
Diese dann in PHP auswerten und gut ist

**DifficultChild** · 24.05.2006, 09:44

hmmm, versteh ich irgendwie nicht ganz, oder ich steh ein wenig auf der Leitung.
Meinst du, ich sollte 1 Bild erstellen, welches 216 kleene Kästchen mit den Farben enthält oder soll ich für jede Farbe ein einzelnes Bild erstellen?
Wenn du das erstere meinst: gibt es irgendetwas, womit ich so ein Bild automatisiert erstellen kann(ein fertiges Script für ein Graphikprogramm oder ähnliches)? Wenn ich dieses bunte Bild mit PHP versuchen würde zu erstellen, wie wäre da die Performance? ich habe noch nie unter PHP gezeichnet, weil ich es noch nicht brauchte, weiss also auch nicht, ob da die Performance leidet (ganz zu schweigen davon, dass ich noch nichtmal weiss, wie ich das Auslesen überhaupt vornehmen soll, aber das wird wahrscheinlich nicht so schwer sein).

**Wurzel** · 24.05.2006, 09:48

wenn ich dich richti verstehe, hast du da einen color-picker? wenn du eh auf javascript zum ein und ausblenden setzt, kannst du die farbtabelle auch aus einem array per javascript erzeugen.

ps: floatende spans mit einem leeren gif als platzhalter und hintergrundfarbe entschlacken ungemein.

**combie** · 24.05.2006, 09:57

Ja ein Bild mit 216 Kästchen!
Das Bild braucht nur erstellt zu werden, wenn sich an der Farbtabelle
was ändert! Also im Regelfall 1 mal.
Und ja, man kann das Bild mit PHP erstellen.

Schau dir mal dazu folgendes an:
http://de3.php.net/manual/de/ref.image.php
http://de.selfhtml.org/html/formular....htm#grafische

Beachte dabei, das der Browser an den Namen des Buttons
_x und _y anhängt.

(ob das die beste Möglichkeit ist, sei mal dahingestellt)
Die Variante von Wurzel ist bis auf den JS-Zwang auch sehr schön.

**DifficultChild** · 24.05.2006, 10:02

vom prinzip her hast du recht, es ist eine art color picker, nur leider fiel mir nix anderes ein, als die farben in einer tabelle darzustellen.
wenn ich wüsste, wie ich diese buntbekleckste Farbtabelle anders darstellen könnte, würde ich den Mausklick mit JS abfangen und die X- und Y-Positionen abfangen, bin zwar Anfänger bei Javascript, aber soweit hab ichs kapiert, dass ich die beim Click-Event mit erhalte.
Scheinbar ist das grösste Problem für mich bei der ganzen Sache, dass ich keine Ahnung habe, wie ich die bunte Palette bekomme (egal ob rund oder eckig)

Original geschrieben von Wurzel
..ps: floatende spans mit einem leeren gif als platzhalter und hintergrundfarbe entschlacken ungemein.

Was meinst du mit einem floatende span? meisnt du, die ganze tabelle mit spans und leeren Gifs aufbauen?

**Wurzel** · 24.05.2006, 10:14

Original geschrieben von DifficultChild
Was meinst du mit einem floatende span? meisnt du, die ganze tabelle mit spans und leeren Gifs aufbauen?

vgl:

Code:

<span class="xy" style="background-color:#471100"><a href="#" onclick="machwas('471100');"><img src="leer.gif" ...></a></span>

mit

Code:

<table ....>
    <tr>
         <td  style="background-color:#471100">
              <a href="#" onclick="machwas('471100');"><img src="leer.gif" ...></a>
          </td>
     </tr>
...

mehr code als die spans, bei 216 feldern läppert sich das. ausserdem braucht der browser länger zum darstellen wie du schon bemerkt hast. den rest findest du bei selfHTML.

das "imagemap" ist auch keine schlechte idee.

**wahsaga** · 24.05.2006, 10:22

Original geschrieben von Wurzel
mehr code als die spans, bei 216 feldern läppert sich das.

So viel Code braucht es ja auch nicht wirklich.

A ist vollkommen überflüssig, onClick kann auch gleich auf dem Image verwendet werden. Und onClick muss auch nicht im HTML stehen, sondern kann per Javascript dynamisch hinzugefügt werden.

Und wenn Javascript essentiell für die Anwendung ist - dann könnte man auch gleich die Tabelle per Javascript erzeugen, und bräuchte sie nicht im Quelltext mitschleppen.

ausserdem braucht der browser länger zum darstellen wie du schon bemerkt hast.

Das würde ich keinesfalls so pauschal formulieren wollen.

Auch floatenede Elemente in großer Anzahl können Probleme machen - oftmals sogar größere, als eine Tabelle.

**Wurzel** · 24.05.2006, 10:53

Original geschrieben von wahsaga
Das würde ich keinesfalls so pauschal formulieren wollen.

Auch floatenede Elemente in großer Anzahl können Probleme machen - oftmals sogar größere, als eine Tabelle.

hm, ich habe noch im hinterkopf, "eine tabelle wird gerendert, wenn der browser weiss, dass sie geschlossen wurde" oder täusche ich mich da.

hast du ein beispiel für das float-problem? ist mir selbst bei mehr als 216 elementen (noch) nicht untergekommen.

**DifficultChild** · 24.05.2006, 10:55

Original geschrieben von wahsaga
... Auch floatenede Elemente in großer Anzahl können Probleme machen - oftmals sogar größere, als eine Tabelle.

hast recht, ich hab das nämlich gleich ausprobiert. mit den floatenden Elementen steigt die Zeit bis zur Anzeige im IE auf 16 Sekunden und die anderen Browser benötigen auch mehr Zeit.
Ich muss mir also irgendwie beim starten des Scripts ein image erzeugen, ich weiss zwar noch nicht genau wie, aber in dem Link zu PHP.Net ist ja lesestoff für die nächsten Wochen, da wird schon was brauchbares sein.

Was den Tipp mit dem JavaScript und der Tabelle betrifft: Wenn ich die Tabelle vom JS erzeugen lasse, dann bedeutet dass doch, dass die Tabelle auf onClick() des Users immer wieder neu aufgebaut wird. Sollte mich das als Programmierer tangieren (die Seite wird ja erstmal recht schnell beim User aufgebaut), oder sollte ich es einfach als Problem des Users abtun, wie schnell dessen Maschine dann den Layer aufbaut(JS erzeugt ja die Tabelle erst "vor Ort")? Denn Tatsache bleibt ja nach wie vor, dass der IE scheinbar ein Problem mit Tabellen hat.

**wahsaga** · 24.05.2006, 12:20

Original geschrieben von Wurzel
hm, ich habe noch im hinterkopf, "eine tabelle wird gerendert, wenn der browser weiss, dass sie geschlossen wurde" oder täusche ich mich da.

hast du ein beispiel für das float-problem? ist mir selbst bei mehr als 216 elementen (noch) nicht untergekommen.

Eine Tabelle hat einen klaren, starren Aufbau: Y Zeilen á X Spalten.
Darauf kann ich mich als Browsern beim Rendern sehr schnell einstellen: Es kommen X Spalten nebeneinander, fertig aus.

Ersetzt du die Tabelle durch nebeneinander gefloatete Elemente (Spalten), auf denen dann auch irgendwo wieder clear auftaucht ("nächste Zeile beginnen"), muss ich mir als Browser für jedes neue Element erst mal wieder ausrechnen
- passt es überhaupt noch in die selbe Zeile, oder muss ich es evtl. schon in die nächste fließen lassen
- hat das Element ein clear oder nicht, will es also eine neue "Zeile" auf jeden Fall erzwingen.

Die Tabelle mit ihrer starren Struktur, die die Anzahl Zeilen und Spalten schon rein vom HTML her vorgibt, noch bevor ich mit dem grafischen Rendern überhaupt begonnen habe, dürfte da oftmals die performantere sein.

Original geschrieben von DifficultChild
Was den Tipp mit dem JavaScript und der Tabelle betrifft: Wenn ich die Tabelle vom JS erzeugen lasse, dann bedeutet dass doch, dass die Tabelle auf onClick() des Users immer wieder neu aufgebaut wird.

Nein, wieso?
Ich meinte lediglich, dass du nach dem Laden der Seite die Tabelle dynamisch aufbauen sollst - dass erspart es dir (und dem Nutzer), jede Menge HTML-Daten zu übertragen, die sich dann doch kaum voneinander unterscheiden.
Mit Javascript kannst du eine Tabelle mit Y Zeilen und X Spalten mit recht wenig Code dynamisch erstellen lassen.
Erfolgt dann auch noch die "Farbgebung" nach einem bestimmten Muster, dass sich nach einer einfachen Formel errechnen lässt - dann müssen auch dei Farbwerte für jede Zelle nicht mehr vom Server an den Client übertragen werden, sondern können auf dem Client ermittelt werden.

Denn Tatsache bleibt ja nach wie vor, dass der IE scheinbar ein Problem mit Tabellen hat.

Da kann es durchaus noch Optimierungspotential geben.

**combie** · 28.05.2006, 16:24

Also, ich habe in meinem Fundus keinen Browser gefunden,
welcher bei einer 216 Zelligen Tabelle Sorgen macht.

Wer es mal testen möchte: Farb-Tabelle

Die Tabelle wird mit PHP erzeugt.
Jedes TD hat einen onclick.

Also nix optimiert und trotzdem in Sekundenbruchteilen sichtbar!

Ja, doch, auf Kommentare habe ich großzügig verzichtet

Wird geladen... Bitte warte.

Performance Tabellenaufbau im IE

Performance Tabellenaufbau im IE

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar