Ist das browser-caching CSS-hintergrund-images?

Wenn ich das gleiche Bild verwendet für verschiedene Elemente (sprite-Bilder), die ich in der Regel nicht telefonisch, das Bild wieder, als dieser eine neue HTTP-Anforderung.

Ich eher verwenden:

element1 {
    background: url(someImage.png);
}

element2 {
    background-image: inherit;
}

Ist diese Einsparung von HTTP-requests?

Oder wenn der browser ist intelligent und ich kann mit:

element1 {
    background: url(someImage.png);
}

element2 {
    background: url(someImage.png);
}

Ist der browser gehen, um eine neue HTTP-Anforderung? Oder er weiß, dass ich schon dieses Bild zwischengespeichert?

Die Frage ist: Gewinne ich etwas mit Beispiel 1?

  • Es hängt von der browser.
InformationsquelleAutor adardesign | 2010-01-20
  1. 5

    In dem Szenario, das Sie beschreiben, wird der browser im wesentlichen auf den gleichen Bild mehrmals auf eine Seite, und dies wird fast sicher zwischengespeichert werden.

    Über verschiedene Seiten, die Antwort hängt vom browser und auf der Ablauf-Header Ihrem server sendet, wird Auswirkungen auf das caching-Verhalten in konformen Agenten.

    • so Gewinne ich etwas aus mit background-image:inherit;?
    • Andere als die Suche noch schlechter, Ihre IE6-und IE7-Nutzer? Nicht wirklich. Und Erben sollten, haben nur einen Effekt, wenn die ersten css-Selektor auf Elemente angewendet wird, mit der zweiten; wenn Sie nicht übereinstimmen, beide, oder die erste, bekommen Sie nichts.
    InformationsquelleAutor JasonTrue
  2. 4

    Ja, Browser laden Sie die zweite Referenz auf das gleiche Bild in der CSS-Datei aus dem cache. Mit Firebug werden Sie in der Lage, um zu sehen, die alle HTTP-Anforderungen vom browser.

    • so Gewinne ich etwas aus der Verwendung von background-image:inherit;
    • Nein, es macht keinen Unterschied.
    InformationsquelleAutor jeffreyveon
  3. 1

    Wenn Sie möchten, um die Dinge zu vereinfachen und cache-Ressourcen und Bandbreite sparen, dann sollten Sie ein appcache.appcache-Datei in den Stammordner Ihrer website. Dieser link gibt ein tutorial zum erstellen von appcache. Es spart http-requests, wenn der Benutzer besucht Ihre Website mehr als einmal, und speichert Sie auf anfordern das gleiche Bild zweimal, wenn es bereits im cache vorhanden ist.

    Happy Caching!

    InformationsquelleAutor Ilan Biala
Schreibe einen Kommentar