代码之家  ›  专栏  ›  技术社区  ›  adardesign

浏览器是否缓存CSS背景图像?

  •  5
  • adardesign  · 技术社区  · 15 年前

    当我将相同的图像用于不同的元素(sprite图像)时,我通常不会再次调用该图像,因为这是一个新的HTTP请求。

    我宁愿使用:

    element1 {
        background: url(someImage.png);
    }
    
    element2 {
        background-image: inherit;
    }
    

    这是否保存HTTP请求?

    或者,如果浏览器很智能,我可以使用:

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

    浏览器是否要发出新的HTTP请求?或者它知道我已经缓存了这个图像?

    问题是:我是否通过使用示例1获得了一些东西?

    3 回复  |  直到 15 年前
        1
  •  5
  •   JasonTrue    15 年前

    在您描述的场景中,浏览器基本上会在一个页面上多次引用同一图像,这几乎肯定会被缓存。

    在不同的页面上,答案取决于浏览器,而服务器发送的过期头将影响一致性代理中的缓存行为。

        2
  •  4
  •   jeffreyveon    15 年前

    是的,浏览器将从缓存中加载对CSS文件中相同图像的第二个引用。使用Firebug,您将能够看到浏览器发出的所有HTTP请求。

        3
  •  1
  •   Ilan Biala    12 年前

    如果您希望简化工作并缓存资源并节省带宽,那么您应该在网站的根目录中创建appcache.appcache文件。 This link 提供有关生成AppCache的教程。如果用户多次访问您的站点,它将保存在HTTP请求上;如果同一个映像已经存在于缓存中,它将保存在请求上两次。

    快乐的缓存!