nicht angemeldet
Layout einer Unterseite rendern, diese aber erst später anzeigen
MudGuard
Matthias Apselhi,
also mir geht es um folgendes:
Ich arbeite gerade an einer performance-senstiven Webapplikation. Deshalb versuche ich zu tunen, in dem ich (heuristisch) zu erraten versuche, welche Seite wahrscheinlich demnächst gezeigt wird. Diese Unterseite wird dann via XHR (XMLHttpRequest) vorgeladen und bei Bedarf (d.h. wenn der Benutzer auf einen Link zu einer vorgeladenen Unterseite klickt) in den DOM-Baum eingebunden.
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.
Bis jetzt wurden immer nur bestimmte Unterseiten im Vorhinein vom Server abgefragt. Allerdings wurde das Layout-Rendering (also das Berechnen der graphischen Darstellung der Seite) immer erst durchgeführt, sobald ich die Knoten der Unterseite in den DOM-Baum eingebunden habe - also gerendert wird erst dann, wenn der Benutzer auf den Link geklickt hat. 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.
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?
Ich hoffe das war soweit klar formuliert, bitte informieren, sollte etwas unklar sein.
Danke für eure Hilfe.-ö
lg hummel.
-
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
-
Hi,
Im Prinzip kannst du Inhalte ins DOM einfügen und nur verstecken, also auf visibility: hidden oder opacity: 1 setzen,
Verstecken wohl eher mit opacity:0; ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Im Prinzip kannst du Inhalte ins DOM einfügen und nur verstecken, also auf visibility: hidden oder opacity: 1 setzen,
Verstecken wohl eher mit opacity:0; ...
Hast du noch nicht gehört, dass man sich am Besten versteckt/tarnt, wenn man ganz offensichtlicht handelt? :p
-
Hi,
Im Prinzip kannst du Inhalte ins DOM einfügen und nur verstecken, also auf visibility: hidden oder opacity: 1 setzen,
Verstecken wohl eher mit opacity:0; ...
Hast du noch nicht gehört, dass man sich am Besten versteckt/tarnt, wenn man ganz offensichtlicht handelt? :p
Ach so, so wie der Elephant mit roten Tupfen im Kirschbaum? ;-)
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Om nah hoo pez nyeetz, MudGuard!
Ach so, so wie der Elephant mit roten Tupfen im Kirschbaum? ;-)
Die Frage zu dieser Antwort lautet aber: "Warum haben Elefanten rote Augen?"
Matthias
--
1/z ist kein Blatt Papier.
-
-
Hast du noch nicht gehört, dass man sich am Besten versteckt/tarnt, wenn man ganz offensichtlicht handelt? :p
Nein!
Was auch man verstecken will (und sei es sich selbst!) das erkläre man einfach zum Problem anderer Leute.
Fred
-
-
-