Layout einer Unterseite rendern, diese aber erst später anzeigen

[molily]

Hallo,

Allerdings merke ich, dass das Layout der Seite ein paar Sekunden braucht bis es richtig gerendert ist (vermutlich aufgrund der komplexen Inhalte - CSS-Transforms etc.) - die Seite wird also nicht sofort nach der Änderung des DOM-Baums korrekt gezeigt. So entsteht eine Wartezeit zwischen Klick des Links und richtigem Layout-Rendering.

Ein paar Sekunden???
Entweder der Inhalt ist unglaublich groß, dann solltest du ihn besser in kleinere Stücke aufbrechen, oder das CSS ist überkomplex und du solltest Performance-intensive Eigenschaften herausnehmen.

Die Timeline des Web Inspectors von Webkit-Browsern wie Chrome und Safari zeigt dir ganz genau an, wofür Zeit draufgeht. Diesen solltest du zur Performance-Optimierung verwenden und die Ursachen dieses langsamen Renderings lokalisieren.

Das Layout-Rendering sollte aber schon im Vorhinein im Hintergrund durchgeführt werden, damit, sobald der Link zur Seite angeklickt wurde, die Seite ohne Verzögerung anzeigt werden kann.

Davon wird der Nutzer vermutlich nichts haben. Während er die Seite bedient, lädst du schon Inhalte im Hintergrund und blockierst den Browser mit dem Rendering von neuen Inhalten, die noch nicht sichtbar sind, während der Use mit den gegenwärtigen Daten interagiert. Das ist von der User Experience eher schlimmer.

Meine Frage nun: Wie kann ich erreichen, dass das Layout schon im Hintergrund (also ohne das der Benutzer was sieht) gerendert wird, bevor der Benutzer noch auf den Link geklickt hat?

Im Prinzip kannst du Inhalte ins DOM einfügen und nur verstecken, also auf visibility: hidden oder opacity: 1 setzen, oder per absoluter Positionierung oder Transformation aus dem Viewport verschieben. Es ist aber den Browsern überlassen, ob sie die Elemente dann rendern. Der Performance halber werden sie es vermutlich nicht tun, solange die Elemente nicht wirklich auf der dargestellten Fläche Pixel färben. Insofern kannst du auszuprobieren, was in den verschiedenen Browsern geht.

Generell gibt es keine vordefinierte Möglichkeit, um etwas Off-Screen zu layouten, zu rendern und dann nur noch im Viewport zu zeichnen. Das sind Low-Level-Operationen, die du mit HTML/CSS/JavaScript nicht vornehmen kannst, es sei denn, du verwendest Canvas – aber das entspricht nicht deinen Anforderungen.

Allgemein verbessert es die Layouting-Performance, wenn Reflows durch feste Höhen und Breiten vermieden werden.

Mathias