如果没有使用,浏览器会缓存CSS背景图像吗？

Question

当你有两个这样的规则:

.foo {
  background-image: url(foo.gif);
}

.foo {
  background-image: url(bar.gif);
}

并有 <div class='foo'>Foobar</div>

您的浏览器会同时缓存,还是仅实际显示(bar.gif在这种情况下)？

在所有设置中都是如此吗？(规则在不同的文件中,!important适用于一个,等等)

Answer 1

我假设这里的“缓存”是指“预加载”。实际的“缓存”与过期标头等有关。

它完全基于浏览器的行为及其选择执行的操作。然而，我的经验是，现代浏览器不会费心加载 CSS 文件中定义的图像，除非实际需要该图像。

这是一些人选择将元素的默认状态和悬停状态制作成一张图像的原因之一，然后使用background-position属性来更改可见状态。虽然开销更大，但悬停和显示悬停状态之间也没有延迟，从而提供更流畅的体验。