多次指定相同的CSS背景

Question

如果你在不同的CSS选择器中指定相同的图像，它会单独下载还是以后url会使用第一个？

.a {
   background: url('image1.png');
}

...

.b {
   background: url('image1.png');
}

Answer 1

实际上在所有浏览器中，我们都有浏览器缓存。一旦加载，它将不会再次加载。如果文件大小和名称相同，则无法再次加载。您可以使用firebug或developertools跟踪它。

  

试一试 - 在查看缓存问题时，可以使用像Firebug这样的工具   Firefox或Chrome中的开发人员工具非常有用。如果   你打开“Net”面板并重新加载页面，你会看到   为每个项目发送了什么HTTP状态代码。 304（未修改）表示   该项目是从缓存中本地检索的。

     

正如dthorpe所说，缓存标头在这里很重要。以及   如果您有权访问，请确保未设置'no-cache'   您的服务器配置应该是主动的 - 如果您知道的话   资源不会改变你应该确保设置一个   'Expires'标题（告诉浏览器一个日期，之后缓存   复制应被视为过时）或'Cache-Control：max-age'标头   （它提供了若干天/小时而不是设定日期）。

     

您可以为不同的mime类型/文件夹设置不同的时间刻度   也是，它允许您获取客户端数据以刷新HTML内容   经常，但图片和样式表很少。

     

这是一篇很好的介绍性视频/文章，值得一试。

突出显示的是此stackoverfow问题的正确答案。如果您尝试了解Web浏览器的工作原理，那将会很有趣。