Wir alle wissen, dass CSS Sprite Bilder sind großartig, um die Menge der Anfragen und so zu reduzieren, aber was ist mit der Leistung des Browsers Rendern der Seite mit mehreren Elementen mit einem großen Bild als Hintergrund?CSS Sprites browser rendering
auf langsameren Rechnern, die mit älteren Browsern (wie IE6/IE7) ausgestattet sind, können Sie einen erheblichen Leistungsabfall bemerken, wenn Sie sehr große Bilder oft auf einer Seite verwenden. Es ist noch schlimmer, wenn Sie Sprites für: Hover-States verwenden.
Sie müssen Ihre Versuchung mildern, alle Ihre Sprites auf ein riesiges Bild zu übertragen - überlegen Sie, welche Elemente Teil der Website/Webapp UI sind und fügen Sie sie in eine Sprite-Datei ein (diese werden beim Browsen immer angezeigt)). Versuchen Sie dann, den Rest der Sprites in website-spezifische Bilder zu gruppieren und verwenden Sie diese nach Bedarf. Nachteil ist eine leicht verlängerte Ladezeit (zusätzliche HTTP-Anfragen), aber die Benutzererfahrung beim Betrachten/Scrollen der Seite wird viel höher sein.
Wie wir anhand unserer YouTube-Erfahrung feststellen können, gibt es kein großes Problem damit.
Ich hoffe, dass der Browser ein Bild im Speicher zwischenspeichert und es dann zum Rendern der Ausgabe verwendet, wo auch immer dieses Bild benötigt wird.
Sie müssen die Dinge ausgleichen. Wenn du über ein Bild sprichst, das 1000 Sprites enthält, dann wird das CSS riesig sein. Außerdem besteht eine sehr geringe Chance, dass Sie alle Sprites auf derselben Seite trotzdem verwenden.
Sie können eine erhebliche Menge an HTTP-Anfragen speichern, indem Sie Ihre Bilder in einem oder mehreren zusammengesetzten Sprites konsolidieren und CSS verwenden, um Teile des Sprites innerhalb Ihrer Webseite selektiv anzuzeigen. Jetzt, da die wichtigsten Browser sich so weit entwickelt haben, dass sie CSS-Hintergründe und -Positionierungen unterstützen, verwenden mehr Websites diese Leistungstechnik. Tatsächlich verwenden einige der am stärksten frequentierten Websites im Web CSS-Sprites zum Speichern von HTTP-Anfragen.
Mit Millionen von Benutzern, Yahoo! und AOL tun alles, um die Benutzererfahrung zu verbessern. Sowohl AOL.com als auch Yahoo.com verwenden CSS-Sprites, um zahlreiche HTTP-Anfragen für ihre komplizierten Schnittstellen zu speichern. Beide Websites verwenden CSS-Sprites, um Symbole in ihren Dienstverzeichnissen selektiv anzuzeigen, und Yahoo! verwendet Sprites auch anderswo.
Ein weiterer Vorteil von CSS-Sprites ist, dass das kombinierte Bild oft kleiner ist als die einzelnen Bilder, obwohl Leerzeichen zwischen den Bildern hinzugefügt werden. Die geringere Größe von Sprites ist auf den reduzierten Overhead mehrerer Farbtabellen und Formatierungsinformationen zurückzuführen, die von separaten Images benötigt werden. Um die Zugänglichkeit und Benutzerfreundlichkeit zu maximieren, werden CSS-Sprites am besten für Symbole oder dekorative Effekte verwendet.
Sie haben die Frage nicht beantwortet. Die Frage war die Browser-Rendering-Leistung, nicht Bandbreite oder HTTP-Anfragen. –
Eigentlich eine interessante Frage! – User