CSS Sprites Browser-Rendering

Question

Wir alle wissen, dass CSS-Sprites Bilder sind groß, die Anzahl von Anfragen und so, aber was über die Leistung des Browsers Rendern die Seite mit mehreren Elementen mit einem großen Bild als Hintergrund zu reduzieren?

Answer 1

auf langsameren Maschinen mit älteren Browsern ausgestattet (wie IE6 / IE7) können Sie erheblichen Leistungsabfall bemerken, wenn Sie sehr große Bilder auf einer Seite oft mit sind. Es ist noch gravierender, wenn Sie Sprites verwenden für:. Staaten schweben

Sie haben Ihre Versuchung moderieren auf alle Sprites zu einem großen Bild drängen - darüber nachdenken, welche Elemente Teil der Website / Webapp UI und steckte sie in eine Sprite-Datei sind (die ganze Zeit angezeigt werden, während des Surfens) . Dann versuchen Sie gruppieren Rest des Sprites in Website Abschnitt spezifische Bilder, und verwenden Sie sie nach Bedarf. Kehrseite ist etwas Ladezeit verlängert (zusätzliche HTTP-Anfragen), aber die Erfahrung Benutzer während des Betrachtens / Scroll-Seite wird viel höher sein.

Answer 2

Sie müssen die Dinge auszubalancieren. Wenn Sie über ein Bild sprechen, die gehören sagen 1000 Sprites dann wird die CSS sehr groß sein. Darüber hinaus gibt es eine sehr dünne Chance, dass Sie alle diese Sprites auf der gleichen Seite sowieso werden.

Answer 3

Wie wir aus unserer YouTube-Erfahrung beurteilen können, gibt es kein großes Problem.

Wir hoffen, Browser ein Bild im Speicher-Caches und dann verwendet er Ausgabe zu machen, wo immer dieses Bild benötigt wird.

Answer 4

Sie können durch die Konsolidierung Ihrer Bilder in eine oder mehrere Verbund Sprites und mit Hilfe von CSS, um selektiv angezeigt werden Teile des Sprites in Ihrer Web-Seite eine erhebliche Menge an HTTP-Anfragen speichern. Nun, da die gängigen Browsern haben sich weiterentwickelt genug CSS Hintergründe und Positionierung zu unterstützen, mehr Websites setzen auf diese Spieltechnik. einige der meistbesuchten Seiten auf dem Web, CSS-Sprites in der Tat, HTTP-Anfragen zu speichern.

Mit Millionen von Nutzern, Yahoo! und AOL alles tun, was sie können, um die Benutzerfreundlichkeit zu verbessern. Sowohl AOL.com und Yahoo.com CSS-Sprites verwenden, um zahlreiche HTTP-Anforderungen für ihre komplizierten Schnittstellen zu speichern. Beide Seiten betrachten zu können CSS-Sprites, um selektiv Symbole anzeigen in ihre Verzeichnisse von Diensten und Yahoo! wie auch anderswo verwendet Sprites.

Ein weiterer Vorteil von CSS-Sprites ist, dass das kombinierte Bild ist oft kleiner in der Dateigröße als die einzelnen Bilder, trotz Zugabe von Leerzeichen zwischen den Bildern. Die kleinere Größe von Sprites ist aufgrund des reduzierten Aufwand für mehrere Farbtabellen und Formatierungsinformationen durch separate Bilder erforderlich. Zur Maximierung der Zugänglichkeit und Nutzbarkeit, CSS-Sprites ist am besten für die Symbole oder dekorative Effekte verwendet.