borisbaer: Aufflackern (FOUC) von durch JS manipulierten Elementen verhindern.

Beitrag lesen

Hallo Rolf,

wenn du das Script aus einer externen JS Datei lädst, dann kann das passieren. Muss nicht, weil JS Dateien normalerweise vom Browser gecached werden, aber es kann. Ggf. solltest Du die HTTP Header der JS Datei überprüfen, ob das Caching durch irgendwas verhindert wird.

das Problem ist bei mir der Hard Refresh. Wenn ich das ganze über das DOMContentLoaded-Event laufen lasse, dann sehe ich zwar deutlich weniger dieses Aufflackern, aber dafür werden Teile des Skripts, die z.B. Breiten von Elemente ermitteln, beim Hard Refresh (STRG + F5) oft nicht korrekt berechnet. Beim load-Event habe ich das zum Glück nicht, aber dafür sieht man häufig das Aufflackern.

Ich finde die URL deiner Seite nicht mehr (bzw das, was in älteren Postings von Dir steht, führt ins Leere). Ziehst Du das Script aus einer JS Datei oder generierst Du es per PHP? Möglicherweise besteht da Optimierungspotenzial.

Z. B. hier.

Man muss auch zwischen Developer-System und Produktions-System trennen, da sind unterschiedliche Cache-Ansätze wünschenswert (Developer wollen immer die neueste Version, User wollen die schnellste Lieferung).

Da du es ansprichst: Ich hatte eine Klasse erstellt (GraphicLoader), weil nach dem Upload eines Bildes häufig noch die alte Version angezeigt wurde (der Browser erkennt aufgrund des gleichen Namens nicht, dass es eine Veränderung gab und lädt aus dem Cache die alte Version). Ich habe das mit ETags gelöst, aber das verzögert das Laden des Bildes schon ziemlich arg, weil es über einen GET-Request läuft und da erst mal diverse Sicherheitsüberprüfungen stattfinden. Ich tendiere daher wohl doch eher zur Versionierung von Dateinamen.

Was Du auf jeden Fall probieren kannst, ist eine Einbindung des Scripts im <head>, aber mit defer-Attribut. Dann wird es so ausgeführt, als stünde es am Ende des body, und kann geladen werden, während der Browser das Dokument einliest.

Danke, das hatte ich auch schon gemacht. Stimmt, es ist das gleiche, wie wenn ich einfach am Ende der HTML-Datei das Skript aufrufe. Übrigens habe ich jetzt auch doch bei beiden Methoden gemerkt, dass der Hard Refresh wieder zu Problemen führt, soll heißen, das Skript wird nicht richtig ausgeführt.

Ich überlege mir zweigleisig zu fahren. Beim normalen Refresh über defer, sollte aber ein Hard Refresh erfolgen über den load-EventListener.

Grüße
Boris