Warum blinken Browser immer vor dem Anzeigen einer neuen Seite?

[Nooooooooooos]

Hi

Ich frage mich, warum ein Browser beim Laden einer Webseite immer einen kleinen Augenblick einen komplett weissen Hintergrund zeigen, bevor sie diesen mit der neuen Seite füllen.
Warum können sie den neuen Inhalt nicht einfach gleich auf die alte Seite malen? Ich habe nämlich eine Seite, bei welcher ein Teil immer gleich bleibt und hätte gerne, wenn dieser beim Seitenwechsel einfach bleiben würde wie er ist und nicht blinkt.

Wie kann ich das bewirken? Bei AJAX geht das reloaden ja auch ohne Blinken.

Gruss
Nooooooooooos

[suit]

Ich frage mich, warum ein Browser beim Laden einer Webseite immer einen kleinen Augenblick einen komplett weissen Hintergrund zeigen, bevor sie diesen mit der neuen Seite füllen.

Du verwendest den falschen Browser.

Warum können sie den neuen Inhalt nicht einfach gleich auf die alte Seite malen?

Vernünftige Browser machen das.

Ich habe nämlich eine Seite, bei welcher ein Teil immer gleich bleibt und hätte gerne, wenn dieser beim Seitenwechsel einfach bleiben würde wie er ist und nicht blinkt.

Der Benutzer eines Browser ist es gewohnt, dass sein Browser das tut was er tut - das ist bei anderen Seiten auch so.

Warum sollte das den Benutzer grade bei deiner Seite stören?

Wie kann ich das bewirken?

Installiere einen ordentlichen Browser.

Bei AJAX geht das reloaden ja auch ohne Blinken.

Das kommt ebenfalls auf den Browser an - auch hier kann es sein, dass das ersetzen im DOM so viel Zeit in Anspruch nimmt, dass der Inhalt kurz verschwindet und dann erst der neue erscheint.

[Nooooooooooooos]

Danke vielmals für Eure Antworten.

»»Das tun sie nicht immer, sondern in Abhängigkeit vom Geschick des Content-Erstellers.
OK und was muss dieser beachten, damit er sich geschickt anstellt?

»»Tun sie doch, und gerade darum wird ja der Bildschirm oft kurzfristig blank.
Meiner mach sollte der Browser so einzustellen sein, dass er, wenn an einer bestimmten, noch gelben, Position etwas Blaues hinkommt, direkt von Gelb nach Blau schaltet und dazwischen nie etwas Weisses zu sehen ist.

»»Dann solltest du die Reihenfolge der eingebundenen Ressourcen ändern, d.h z.B. Javascripte am Ende des body referenzieren.
Diesen Satz versteh ich nicht ganz. Ich verwende zwar fast gar kein JavaScript, wäre Dir aber trotzdem dankbar wenn du mir etwas genauer erklären würdest was du damit meinst.

@suit: Du meinst das ist voll Browser-abhängig? Kann man das nicht irgendwie beeinflussen, vielleicht mit einem Header (serverseitige Einstellungen) oder JavaScript? Die Seite läuft bei mir auf einem Server, ich hätte da also die volle Handlungsmacht.

Gruss
Noooooooooooooooos

[suit]

Danke vielmals für Eure Antworten.

Das tun sie nicht immer, sondern in Abhängigkeit vom Geschick des Content-Erstellers.
OK und was muss dieser beachten, damit er sich geschickt anstellt?

Verringere die komplexität des Quelltexts und beschleunige den Ladevorgang - wie Beat schon schrieb:

JavaScript möglichst weit nach unten (und außen) im HTML-Baum - idealerweise kurz vor dem schließenden body-Tag.

Das hat aber dann den Nachteil, dass sich die Seite während des progressive enhancement ggf. noch visuell verändern kann, besonders wenn das JavaScript später das DOM ergänzt.

Weiters: korrigiere die Reihenfolge im CSS so, dass die Verarbeitungsanweiseungen für frühere und weiter außen im Baum liegende elemente vorher im CSS stehen.

»»Tun sie doch, und gerade darum wird ja der Bildschirm oft kurzfristig blank.

Meiner mach sollte der Browser so einzustellen sein, dass er, wenn an einer bestimmten, noch gelben, Position etwas Blaues hinkommt, direkt von Gelb nach Blau schaltet und dazwischen nie etwas Weisses zu sehen ist.

CSS-Files werden idR. strikt progressiv und sequentiell abgearbeitet - ansonsten würde das Konzept nicht funktionieren.

Zuerst kommt das Browser-Default-Stylesheet - da steht bei den meisten Browsern drin, dass das html-Element (oder das body-Element) einen weißen Hintergrund haben - dann wird die nächste Regel gelesen die ggf. den hintergrund grün macht, dann gelb und dann braun.

Je nachdem wie schnell der Browser die Regeln verarbeitet, desto weniger Flackern hast du.

Ordentliche Browser sind einerseits extrem schnell und nutzen andererseits den Cache sehr gut.

Opera läd z.B. eine Seite primär aus dem Cache und baut sie erst später um sofern der HTTP-Request nach einem etwaigen CSS-File etwas anderes als Not Modified zurückliefert - sprich wenn sich ein CSS-File geändert hat, wird trotzdem erst mit dem alten, schon geparsten CSS gearbeitet und das dann später ersetzt. Das das fällt bei kleinen Änderungen weiter weniger auf, hat aber den Vorteil dass bei keiner Änderung (was auch zu erwarten ist) die Seite immer sofort da ist.

@suit: Du meinst das ist voll Browser-abhängig?

Nein, aber ein großteil davon ist Browserabhängig: so schlecht kann die Seite garnicht sein, in Opera springt, zuckt und blinkt idR. nichts.

Gegenteilig: so gut kann die Seite garnicht sein, im IE6 wird sie immer "blinken".

Kann man das nicht irgendwie beeinflussen, vielleicht mit einem Header (serverseitige Einstellungen) oder JavaScript?

Du bist lustig: was erwartest du dir?

<meta name="magic-stuff" content="render-me-fast-please" />

Also nochmal:

Du kannst _unmöglich_ egal was man dir erzählt das Flackern wegbekommen, es wird immer einen langsamen Rechnern mit schlechtem Browser geben. Du kannst den Effekt aber durch schlanken und sinnvoll gestalteten Quellcode minimieren.

Z.B. zusätzlich zu Hintergrundbildern auch noch Farben definieren. Ist dein Hintergrund irgend ein Karbon-Muster? Kein Problem, dann pack einfach irgend ein Schwarz oder Grau in ähnlicher Farbgebung rein, dann fällt es nicht so auf, dass die Grafik erst ein paar ms später geladen wird.

[Licht]

Hallo,

@suit: Du hast in sofern recht, das es browserabhängig ist, weil sie unterschiedlich schnell beim Rendern sind. Aber nicht weil die eine andere Reihenfolge machen würden oder so.

Und wie suit schon richtig gesagt hat gibt es kein Super-Header der das verbessern würde. Es würde immer auf irgendwelchen Clients zum Flackern kommen.

Kurz und knapp:
Benutze AJAX oder Frames, eine andere Lösung sehe ich da nicht.

Mfg Licht

[suit]

Aber nicht weil die eine andere Reihenfolge machen würden oder so.

Sicher doch: nochmal den krassen Unterschied Opera und Internet Explorer

Wenn Opera ein Dokument anfordert, holt er das Dokument und dann alle darin referenzierten Ressourcen (nach möglichkeit) aus dem Cache - wenn das Dokument schon lange fertig gerendert ist, kann es noch sein, dass ein paar HTTP-Requests eintrudeln die dann etwas anderes als Not Modified liefern. Dann macht es im Dokuement "plopp" und irgend etwas sieht plötzlich anders aus.

Der Internet Explorer verwirft prinzipiell alles und holt dann der Reihe nach wieder ressourcen ab, prüft auf Not Modified und liest dann erst aus dem Cache - das ist in Summe wesentlich langsamer.

Benutze AJAX oder Frames, eine andere Lösung sehe ich da nicht.

Auch das ersetzen der Inhalte mittels DOM-Methoden oder schlichtweg innerHTML oder aber das Laden einzelner Dokumente macht die Browser nicht schneller.

Um ordentlich strukturierten Code kommt man nicht herum, wenn man eine schnelle Seite haben möchte.

[Nooooooooooooos]

Ich hatte mir gehofft, dass die Browser die Seite zuerst in einem Puffer aufbauen und diesen erst wenn er einigermassen komplett ist, in die Anzeige schalten können. Oder halt eben zumindest irgendsoeine Option, wie man z.B. ja auch mit dem Header das Seitencaching ein- und ausschalten kann.

Wegen dem AJAX: Wenn ich jetzt einfach eine Seite index.htm habe, welche nichts anderes tut, als alle Links ihres Contents abzufangen und diese mittels AJAX als neuen Content einzufügen, würde das Problem behoben, oder kommt es wieder auf das Selbe heraus?

Gruss
Noooooooooooooos

[Licht]

@suit: IE zähle ich persönlich ganz ehrlich auch nicht mehr als Browser sondern als ein Haufen Schrott und die Restlichen Browser laden die Resourcen so wie Du es beschrieben hast.

»»Ich hatte mir gehofft, dass die Browser die Seite zuerst in einem Puffer aufbauen und diesen erst wenn er einigermassen komplett ist, in die Anzeige schalten können. Oder halt eben zumindest irgendsoeine Option, wie man z.B. ja auch mit dem Header das Seitencaching ein- und ausschalten kann.
Ja, es gibt eine Möglichkeit den Cach zu kontrollieren: http://www.webreference.com/authoring/languages/html/HTML5-Application-Caching/ Aber das ist eher nicht das was Du wohl möchtest und würde das Problem auch nicht lösen.

»»Wegen dem AJAX: Wenn ich jetzt einfach eine Seite index.htm habe, welche nichts anderes tut, als alle Links ihres Contents abzufangen und diese mittels AJAX als neuen Content einzufügen, würde das Problem behoben, oder kommt es wieder auf das Selbe heraus?
Dann würde höchstens der Inhalt des aktualisierten Bereichs aufblinken, der Rest müsste allerdings bleiben, zumindest bei guten Browsern und wenn Du z.B. eine Navigationsleiste hast. Wenn Du den gesamten Inhalt einsetzt, kommt natürlich wieder das selbe bei heraus.

Mfg Licht

[suit]

@suit: IE zähle ich persönlich ganz ehrlich auch nicht mehr als Browser sondern als ein Haufen Schrott und die Restlichen Browser laden die Resourcen so wie Du es beschrieben hast.

Nein, Firefox tut das nicht - und Firefox ist das was ich als Haufen Schrott bezeiche :D

[Der Martin]

Hallo,

Firefox ist das was ich als Haufen Schrott bezeiche :D

+1

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Firefox ist das was ich als Haufen Schrott bezeiche :D

+1

Haha. Kuck mal, wer da spricht. ;-)

Qapla'

[suit]

Ich sehe immer noch nicht was das Problem ist - die Leute sind gewöhnt dass es "blinkt".

[Matthias Apsel]

Om nah hoo pez nyeetz, suit!

Z.B. zusätzlich zu Hintergrundbildern auch noch Farben definieren. Ist dein Hintergrund irgend ein Karbon-Muster? Kein Problem, dann pack einfach irgend ein Schwarz oder Grau in ähnlicher Farbgebung rein, dann fällt es nicht so auf, dass die Grafik erst ein paar ms später geladen wird.

... und die Leute, die die Grafiken nicht sehen wollen, sehen trotzdem etwas, was deinem gewünschten Layout entspricht.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Z.B. zusätzlich zu Hintergrundbildern auch noch Farben definieren. Ist dein Hintergrund irgend ein Karbon-Muster? Kein Problem, dann pack einfach irgend ein Schwarz oder Grau in ähnlicher Farbgebung rein, dann fällt es nicht so auf, dass die Grafik erst ein paar ms später geladen wird.

... und die Leute, die die Grafiken nicht sehen wollen, sehen trotzdem etwas, was deinem gewünschten Layout entspricht.

Vor allem sehen sie überhaupt etwas, und nicht weiße Schrift auf weißem Grund.

Qapla'

[Licht]

Hallo

Eine Frage vorweg: Warum benutzt Du kein AJAX?

Meiner mach sollte der Browser so einzustellen sein, dass er, wenn an einer bestimmten, noch gelben, Position etwas Blaues hinkommt, direkt von Gelb nach Blau schaltet und dazwischen nie etwas Weisses zu sehen ist.

Das Problem ist ja, das der Browser genau das tut was Du grade beschrieben hast. Er fängt sofort an die alte Webseite zu übermalen obwohl diese noch nicht fertig geladen ist. Da der Browser oftmals am Anfang die CSS-Eigenschaften für Body findet und diese z.B: background: white; ist übermalt er erst Mal alles weiß, dann sucht er nach dem Text und den Elementen im Body und fängt an diese nacheinander darzustellen. So kommt es zu dem kurzen blinken. Wenn der Browser abwarten würde bis die Seite komplett geladen ist, würde man mit einer schlechten Internet-Verbindung erst nach 5 min. einen langen Wiki-Atikel lesen können. Auch wenn Du keinen background angibst wird dieser per default auf white gesetzt.

»»Dann solltest du die Reihenfolge der eingebundenen Ressourcen ändern, d.h z.B. Javascripte am Ende des body referenzieren.

Das würde ein wenig helfen, da diese dann später geladen würden und somit das rendern der HTML-Elemente nicht aufhalten würden. (Ich denke mal das suit sich das so vorgestellt hat)

@suit: Du meinst das ist voll Browser-abhängig? Kann man das nicht irgendwie beeinflussen, vielleicht mit einem Header (serverseitige Einstellungen) oder JavaScript? Die Seite läuft bei mir auf einem Server, ich hätte da also die volle Handlungsmacht.

Ich heiße zwar nicht suit aber ich antworte trotzdem mal auf diese Frage:
Ich glaube kaum, dass das so Browserabhängig ist, eher gar nicht. Das machen so gut wie alle Browser gleich mit dem Aufbauen. Ich würde einfach Frames oder AJAX nutzen.

Mfg Licht

[suit]

Dann solltest du die Reihenfolge der eingebundenen Ressourcen ändern, d.h z.B. Javascripte am Ende des body referenzieren.
Das würde ein wenig helfen, da diese dann später geladen würden und somit das rendern der HTML-Elemente nicht aufhalten würden. (Ich denke mal das suit sich das so vorgestellt hat)

Das ist doch genau der Knackpunkt - JavaScript-Files werden exakt dort geladen wo sie eingebunden werden - der komplette Reflow-Prozess ist währenddessen blockiert. Bindet man die JavaScript-Files erst kurz vor dem schließenden body-Element ein, spart man sich einerseits einiges an HTTP-Requests auf die gewartet werden muss, andererseits auch einiges an CPU-Time die sonst für die JavaScript-Engine draufgeht.

@suit: Du meinst das ist voll Browser-abhängig? Kann man das nicht

:

Ich glaube kaum, dass das so Browserabhängig ist, eher gar nicht. Das machen so gut wie alle Browser gleich mit dem Aufbauen.

Ich hab' dir zwar schon im anderen Ast geantwortet - aber tu mir bitte einen gefallen:

Installiere dir Opera 11, Firefox 3.6 und den IE8 - dann vergleiche die Ladezeiten unterschiedlicher Seiten - such dir ruhig etwas extrem komplexes aus. Der Acid3-Test ist recht nett um zu sehen wie langsam der Firefox im Vergleich zu Opera, Chrome und Safari mittlerweile ist. Von der Kompatiblität reden wir garnicht erst.

Interessant ist z.B. die Startseite der Bild-Zeitung - die ist so dermaßen überladen, da kannst du beim Firefox (auch wenn er aus dem Cache läd) zuschaun, wie er der Reihe nach die Elemente läd. Wozu der Cache da ist, weiß die Mozilla Foundation scheinbar nicht.

[Gunnar Bittersmann]

@@Licht:

nuqneH

Ich würde einfach Frames oder AJAX nutzen.
Mfg Licht

Du solltest dich nicht Licht, sondern Dunkel nennen.

Qapla'

[Beat]

Ich frage mich, warum ein Browser beim Laden einer Webseite immer einen kleinen Augenblick einen komplett weissen Hintergrund zeigen, bevor sie diesen mit der neuen Seite füllen.

Das tun sie nicht immer, sondern in Abhängigkeit vom Geschick des Content-Erstellers.

Warum können sie den neuen Inhalt nicht einfach gleich auf die alte Seite malen?

Tun sie doch, und gerade darum wird ja der Bildschirm oft kurzfristig blank.

Ich habe nämlich eine Seite, bei welcher ein Teil immer gleich bleibt und hätte gerne, wenn dieser beim Seitenwechsel einfach bleiben würde wie er ist und nicht blinkt.

Dann solltest du die Reihenfolge der eingebundenen Ressourcen ändern, d.h z.B. Javascripte am Ende des body referenzieren.

mfg Beat

[hotti]

hi,

das ist echt eine Unsitte: Beim Abbiegen blinken. Vor dem Abbiegen, voooor!!11

SCNR  ;-)

Fröhliche Weihnacht,
Hotti