Aufflackern (FOUC) von durch JS manipulierten Elementen verhindern.

[Rolf B]

Hallo borisbaer,

Beim normalen Refresh über defer, sollte aber ein Hard Refresh erfolgen über den load-EventListener.

Kannst Du die unterscheiden?

Aber wenn ein Hard Refresh Probleme macht, hast Du Timing-Probleme. Ggf. berechnest Du die Breite eines Bildes, das noch gar nicht geladen ist. Du kannst mit der complete Eigenschaft des img-Objekts prüfen, ob es da ist, und Du kannst auf ein img Element einen load-Handler registrieren, der anzeigt, dass es fertig ist. Alternativ kannst Du am Server schon dem img Element ein width Attribut geben, statt darauf zu warten, dass das Bild da ist.

Was Du auf jeden Fall auch noch tun solltest - zumindest für eine öffentliche Seite - ist Bundling. Prüfe genau, welche Ressourcen Seitenabhängig sind und welche immer geladen werden. Die "Immer" Ressourcen füge zu einer Seite zusammen. Du lädst 17 CSS Dateien und 10 JS Dateien. Der Browser fragt - je nach Gerät - nur 2-4 davon auf einmal an. Durch Bundling lässt sich das von 27 Dateien auf bis zu 2 Dateien senken. Das Streamen einer großen Datei ist schneller als das Laden vieler kleiner Dateien.

Guck Dir genau an, welche JS Files immer gebraucht werden und welche nur gelegentlich. Lade im Zweifelsfall auch gelegentlichen JS Code mit, sofern er nicht stört.

Rolf