Wie Darstellung und Inhalt trennen?

[Rolf B]

Hallo Felix,

Die Zeit für das Rendering im Browser bei fertigem HTML ist eine Konstante. Da kommt man nicht daran vorbei. Das dauert eben.

Weswegen eine Paginierung immer Sinn ergibt. Mein Prozessor ist soo langsam nicht mehr, und er braucht für eine Table mit 1500 Rows und 15 Columns fast eine Sekunde zum vollständigen Rendern (die Zellen enthalten nur Text).

Das Aufbauen des HTML geht zwar fix, aber die Layoutphase kostet dann. Das kann man visualisieren (ohne Dev-Tools):

<script>
const start = Date.now();
</script>
<table>
   <!-- MANY MANY ROWS -->
</table>
<script>
const fertig = Date.now();

window.addEventListener("load", function() {
   const fertig_fertig = Date.now();
});
</script>

Das load-Event feuert, wenn das Rendering der geladenen Seite durch ist.

Der Unterschied zwischen "start" und "fertig" sind 50ms und weniger. Aber von "fertig" bis "fertig_fertig" ist's dann fast eine Sekunde. Auf einem Mobilchen sieht es nochmal ganz anders aus.

Und ein "schlechtes" Generieren mit JavaScript kann auch vorkommen - wenn man z.B. ein tr Element erst in die Table hängt und dann siebenunddrölfzig Spalten hinzufügt, statt zuerst die Spalten einzufügen und das tr Element dann als Ganzes einzufügen.

Ein Tabellentool, mit dem ich mal zu tun hatte, hat sogar zuerst den kompletten Tabelleninhalt als HTML String aufgebaut und den dann dem innerHTML Property des table-Elements zugewiesen. Da gibt's erstaunliche Performance-Unterschiede.

Rolf