Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

Performance-Probleme beim Rendering von Hintergrundbildern im IE

Die schnellste Übertragung von HTML, Bildern & Co. nützt nichts, wenn der Browser beim Rendern dieser Elemente ins Schwitzen kommt. Im Internet Explorer scheint es diesbezüglich ein besonders großes Problem im Zusammenhang mit großen Hintergrundbildern zu geben, wodurch der Browser unter gewissen Umständen mehrere Sekunden lang blockiert und die Seite dadurch unbenutzbar bzw. unscrollbar wird.

Dies ist ein Gastartikel von Lars-Simon Wollny.

Auf unserer Seite www.tui-wolters.de gab es das Phänomen, dass sich der Internet Explorer beim Rendering – vor allem beim Scrollen – etwas träge anfühlte. Das war noch kein großes Problem, den Rahmen gesprengt hat es allerdings, wenn der Zoomfaktor auf 95% reduziert wurde (lässt sich nicht direkt auswählen, aber mit gedrückter STRG-Taste und Scrollrad kann man die Zoomstufe in 5%-Schritten ändern). Der IE war nun nahezu unbenutzbar, die Seite brauchte etwa 1 Minute bis sämtliche Ladevorgänge abgeschlossen waren. Menüs waren sehr träge, beim Scrollen konnte man zusehen wie der IE die Seite Stück für Stück wieder aufbaute.

Merkwürdig war nur, dass es im Firefox und anderen Browsern überhaupt keine Performanceprobleme gab.

Wie wir letztlich nach vielem Ausprobieren festgestellt haben, war das Problem die Hintergrundgrafik: Diese war unten ausgerichtet und in der Höhe so groß bemessen, dass sie auch bei sehr langen Seiten einsetzbar war. Sie war 1px breit, 30.000px hoch und wurde dann entsprechend nach rechts „repeated“. Die Höhe klingt sehr groß, aber die Dateigröße lag bei nur 206 Byte (PNG). Wir konnten die Struktur der Seite nun so ändern, dass die Hintergrundgrafik nur noch etwa 500 Pixel hoch ist; der restliche Hintergrund wird durch Background-Color gefüllt.

Jetzt läufts im IE richtig flüssig, auch bei 95% Zoomstufe. Trügerisch war nur, dass man im Firefox überhaupt keinen Unterschied bemerkt – und auch im IE nur bei 95% Zoomstufe wirklich eine Änderung festzustellen ist.

Getestet und erfolgreich nachgestellt haben wir dieses Phänomen im IE7 und IE8, im IE9 konnten wir leider nicht testen.

Fazit
Man sollte möglichst kleine Hintergrundgrafiken verwenden – nicht nur von der Dateigröße her sondern auch von den Abmessungen. Und wenn man seine Seitenperformance im IE testen möchte, reduziert man am besten die Zoomstufe, dann muss der IE viel mehr arbeiten und man kriegt ein deutlich besseres Bild von potentiellen Flaschenhälsen.