Die ewige Diskussion: Tabellenlayouts vs. CSS-Layouts

[molily]

Hallo, Axel und Christian,

Zudem sind relative Seiten generell für den Browser schwerer zu rendern

Wie das? Dir ist klar, dass das bisschen Rechenaufwand nicht ins Gewicht fällt, wenn Du es mit verschachtelten Tabellen vergleichst? Warscheinlich sind verschachtelte Tabellen sogar langsamer... (da bei jeder Zelle geprüft werden muss, ob nicht eine width-Angabe das ganze Layout verändert)

Dazu habe ich eine Erfahrung gemacht, zwar eher unfreiwillig, aber wie auch immer: Mozilla tut sich beim Rendern meiner CSS-formatierten Startseite manchmal äußerst schwer, die Links, welche in vier Spalten untergebracht sind, werden vielleicht mit drei Zeilen pro Sekunde auf den Bildschirm geschrieben, sodass man das Aufbauen der Seite verfolgen kann. Es sieht sehr so aus, als würde Mozilla den Code zu diesem Zeitpunkt Zeile für Zeile lesen (sicher nicht aus der Datei, sondern aus seinem internen Cache, zu diesem Zeitpunkt sollte zwar die Datei schon mit dem XML-Parser in Objekte zerhackt worden sein, was aber nichts an der Beobachtung ändert). Der Code, der am Ende der Datei steht, wird zumindest erst zum Schluss positioniert, auch wenn er räumlich gesehen vor dem anderen Code (bspw. in der ersten Spalte) stehen mag.
Nun lässt sich beobachten, dass die Links nacheinander spaltenweise (in dieser Reihenfolge stehen sie im Code) einsortiert werden, wobei das den Inhalt der Spalte umfassende Element offensichtlich erst angezeigt wird, wenn auch der Inhalt angegangen wird:

<div id="spalte4" style="min-height:2em; border:medium solid black; background-color:gray;">
<div style="display:none">
...
</div>
</div>

...würde natürlich erst erscheinen, wenn Der Browser sich bis zu diesem Punkt vorgearbeitet hat, der Style ist schon im head-Element bekannt.

Ich mutmaße deshalb, dass bei einem Tabellenlayout, bei welchem nicht die komplette Anzeige bereits Interpretieren des Markups bekannt ist (das heißt die Styles nicht schon im Kopfbereich deklariert und das Aussehen determiniert ist), der Browser erst nach dem letzten table-Endtag Berechnungen über die Anzeige stellen kann, da die Zellen voneinander abhängen in Höhe und Breite.

Hierbei wird der Unterschied zwischen Opera 6.05 und 7 Beta deutlich, denn Opera 6.05 rendert bei einem Tabellenlayout (Beispiel http://www.deviantart.com/, Tabellen zuhauf, dutzendfach verschachtelt, alles steckt in einer großen allesumfassenden Tabelle) erst die *komplette* Seite intern und zeigt sie dann erst an (das Resultat ist eine ewig lange Renderzeit, in welcher nichts angezeigt wird). Opera 7 macht es wie Mozilla, die Tabellen werden schon halbfertig angezeigt, wodurch die Anzeige mehrmals beim Rendern »springt«, weil erst nach dem Rendern des Inhalts einer Zelle deren endgültige Größe berechnet werden kann (weil Zellen nicht etwas wie overflow:hidden haben).

a) die mobilen Endgeräte nicht sooo leistungsunfähig sind

<besserwisser>
*fg* Du mixt immer soooo ;) schön Schriftsprache und gesprochene Sprache, die Emphase auf »so« hätte ich eher anders gelöst, »dermaßen« wäre wohl eher ein Schriftsprachenäquivalent, oder »nicht so leistungsfähig, wie du denkst«, oder positiviere es schlichtweg, »sie sind leistungsfähiger als du denken magst«.
</besserwisser>

(Ich denke, dass kaum jemand mit einer viel schlechteren Systemanforderung unterwegs sein wird)

Öhm... *handheb* Aber immerhin 64 MB RAM.

Grüße,
Mathias