Darstellungsproblem mit Firefox - IE dagegen super

Computer: Software & Programmierung HTML & CSS
#1

Hallo liebe Experten,

ich bin momentan an einem Projekt beteiligt,
bei dem ich eine relativ große HTML-Tabelle aus einer MySQL Datenbank mit PHP generieren lasse.

In der Tabelle sind Pro Zeile ca. 15 Spalten, 4 Spalten davon enthalten Select-Boxen. Da jeder Datensatz (gesamt ca. 400) mit 4 Select-Boxen „versehen“ wird,
entsteht eine relativ große Datenmenge.
4x400 = 1600 Select-Boxen, welche individuelle auswahlen enthalten (jenachdem was in der Datenbank steht).
Die generierte HTML-Datei ist um die 2MB groß.

Das kuriose an der ganzen Sache ist:

  • Der Internet Explorer (v.7) öffnet die Seite in maximal 3 Sekunden
  • Firefox braucht sage und schreibe 80(!!!) Sekunden um die Datei zu laden.

Ist euch dieser Fehler bekannt?

Vielen Dank im Voraus für alle produktive Antworten!

Liebe Grüße Björn

#2

Hi Bjoern,

Firefox versucht während des Ladevorgangs die Anzeige stets zu aktualisieren und zeigt eine Tabelle so erst an, wenn sie vollkommen geladen wurde (also erreicht wurde). Das Ladeverhalten von IE ist anders; IE zeigt einfach einen geladenen Teil an (denkt sich sozusagen den geladenen Teil als geschlossen) und lädt dann weiter. Zwar scheint es deshalb, IE sei schneller (obwohl er eigentlich nur aufhört, die Anzeige zu aktualisieren), aber es kommt oft während des Ladens von Tabellen oft zu Layoutveränderungen (z.B. wenn eine Zeile geladen wird, welche die Breite der Spalten verändert, dann springen die Spalten).

Die einzige Lösung, die mir hierzu einfällt, wäre die Tabelle mit den Daten nach n Datensätzen immer wieder zu schließen. Oder keine Tabelle zu verwenden, was im Falle von tabellarischen Daten aber nicht die beste Idee ist. Das ist im Übrigen kein Fehler, sondern das grundsätzliche Ladeverhalten von Fx. Ob dies bei Fx3 geändert wurde, weiß ich nicht.

Ciao
Rudy

#3

Hey Rudy,

vielen Dank für Deine super kompetente Antwort!

Bleibt für mich nur zu hoffen, dass Fx3 solche Sachen
beinhaltet oder es Möglichkeiten gibt das Ladeverhalten einzustellen.
Oder gibt es sowas schon?

Ich werde nochmal versuchen jedem Datensatz ein eigenes Table zu verpassen. Glaube allerdings nicht, dass sich das positiv auswirkt,
da die Datenmenge durch die Selectboxen ja trotzdem noch so groß ist wie vorher.

Oder sollte man statt PHP-Arrays besser Javascript-Arrays verwenden,
aus denen man dann die Selectboxen füllt?

Viele Grüße
Björn

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#4

Hi Björn,

Bleibt für mich nur zu hoffen, dass Fx3 solche Sachen
beinhaltet oder es Möglichkeiten gibt das Ladeverhalten
einzustellen. Oder gibt es sowas schon?

Es gibt Firefox 3 Beta 5: http://ftp.mozilla.org/pub/mozilla.org/firefox/night… - kannst ja den mal testen.

Ich werde nochmal versuchen jedem Datensatz ein eigenes Table
zu verpassen. Glaube allerdings nicht, dass sich das positiv
auswirkt,

Das glaube ich auch nicht. Wie gesagt würde ich eher die Tabelle sagen wir alle 100 Datensätze schließen und dann neu aufmachen. Jeder Datensatz in einer Tabelle bläht das Ganze ja furchtbar auf.

Oder sollte man statt PHP-Arrays besser Javascript-Arrays
verwenden, aus denen man dann die Selectboxen füllt?

Ich glaube nicht, dass dies etwas ändern würde, weil ich den Grund im Ladeverhalten bei der Tabelle selbst sehe, nicht bei den Select-Boxen. Im Zweifelsfalle würde ich servergenerierten Code vorziehen.

Ciao
Rudy

#5

Hallo M.,

In der Tabelle sind Pro Zeile ca. 15 Spalten, 4 Spalten davon
enthalten Select-Boxen. Da jeder Datensatz (gesamt ca. 400)
mit 4 Select-Boxen „versehen“ wird,
entsteht eine relativ große Datenmenge.
4x400 = 1600 Select-Boxen, welche individuelle auswahlen
enthalten (jenachdem was in der Datenbank steht).
Die generierte HTML-Datei ist um die 2MB groß.

OHA, das ist wohl eine MDA-Seite (massive DOM abuse)

Das kuriose an der ganzen Sache ist:

  • Der Internet Explorer (v.7) öffnet die Seite in maximal 3
    Sekunden
  • Firefox braucht sage und schreibe 80(!!!) Sekunden um die
    Datei zu laden.

Ist euch dieser Fehler bekannt?

Ich hab selber letztens eine MDA-Applikation mit Ajax
geschrieben (es werden dynamisch 5,000 img’s erzeugt)
und ich würde sagen, daß unter XP der IE6 tatsächlich
ca. 1.5 bis 2.0 mal schneller als der FF (2.0.12) ist.

Um mehr zu sagen müßte man die genaue Struktur
Deiner Anwendung bzw. Seite kennen.

Grüße

CMБ

#6

Hey Rudy, hey Semjon!

Vielen Dank für die ganzen Antworten!
Ich habe eine Lösung gefunden, welche die Tabelle in Firefox in 2,4Sek läd!

Zuerst habe ich beim Laden der Seite den Inhalt der vier Selectboxen in vier JavaScript Array geladen.

Die Daten welche durch Selectboxen verändert werden sollen zuerst normal als text in die tds geladen.

Sobald ich nun auf ein bestimmtes TR doppelklicke, wird der text in den betreffenden TDs mit replaceChild durch die passenden Selectboxen
ersetzt.

Somit spare ich mir das Laden der einzelnen Selectboxen für 404 Datensätze! Finde die Lösung wirklich genial.

Also nochmal vielen Dank an euch beide,

bis bald mal wieder,
B.