浏览器是否请求已被 CSS 覆盖的图像？答案

【问题标题】：Do browsers request images that have been overwritten in CSS?浏览器是否请求已被 CSS 覆盖的图像？
【发布时间】：2012-10-03 09:34:45
【问题描述】：

假设我的 CSS 看起来像这样：

#element {background-image: url("image1.png");}
#element {background-image: url("image2.png");}

请问浏览器：

【问题讨论】：

【解决方案1】：

先解析CSS，再请求图片，所以不会下载image1.png

【讨论】：

【解决方案2】：

使用 Chrome 和 Developer Tools 进行一些快速测试：

如果 #element 不存在，则不会下载任何图像，因为浏览器没有匹配的元素来应用样式
如果 #element 存在，则应用通常的 CSS 级联和特定规则，并且只会下载 image2.png，因为该规则出现在 image1.png 规则之后。

也就是说，其他浏览器的行为可能有所不同。

【讨论】：

【解决方案3】：

如果你在 chrome 中实现了一个运行它的网站，你可以看到浏览器首先解析 CSS，创建它需要的规则和请求，然后发出请求。

在 CSS 底部的 CSS 规则中，CSS 覆盖任何顶部的规则，因此浏览器知道只请求最终规则的图像。

【讨论】：

【解决方案4】：

如您所知，当您第一次请求页面时，您的浏览器会向服务器发送请求。然后浏览器开始解析页面。

当它找到对外部资源的引用时，它将对该资源执行另一个请求。所以我认为它仍然会加载它。

【讨论】：