CSS 是否加载注释图像？答案

【问题标题】：Does CSS load commented images?CSS 是否加载注释图像？
【发布时间】：2015-01-12 19:38:07
【问题描述】：

如果我评论一行 ex. /* background: url(images/header_overlay.png) */ 在浏览器上的页面加载上的 CSS 上是否下载了此图像？如果我让它保持原样并包含第二个 CSS 优先于第二个图像怎么办 background: url(images/header_overlay2.png) 在用户浏览器的加载期间，这些图像是否同时下载，然后第二个获得优先权？我想对 css 进行仔细和精确的处理，以减少页面加载时间。我对无法获得完全理想的干净 css 和 css 覆盖的大页面感兴趣。

【问题讨论】：

它不会加载它，在 Chrome 上测试过。我怀疑在任何浏览器上都不会出现这种情况。

标签： css image load

【解决方案1】：

在你的 CSS 中添加注释代码是没有用的。它没有被解析，因此图像不会被下载，但是如果你有一些以后可能有用的代码，那么在某处给自己写一些注释并删除注释的代码。这也减少了文件大小，所以它也是一个微优化。

另外，如果你有两个冲突的规则引用两个不同的图像，那么优先级较高的一个将生效，另一个将被忽略，因此只会从冲突的两个中提取一个图像。

您可以在浏览器中查看下载的图片。例如，使用 chrome，在任意位置单击检查元素，然后在控制台中单击网络选项卡，查看下载了哪些图像。确保在进行此类测试之前清除缓存。

【讨论】：

【解决方案2】：

CSS 不解析注释行，它只是一个文本，里面不能有图像。

如果您在开发工具中看到 header_overlay.png 已下载，则可能是在其他地方定义的。

【讨论】：

【解决方案3】：

没有- cmets 中的任何内容都不会在 CSS 范围内进行解析，评论包装器中的图像不会被下载，也不会影响任何其他（未注释的）规则——这可以是 found in the spec

(...)它们的内容对渲染没有影响

【讨论】：

第二种情况呢，两个背景都没有注释，渲染选择第二个命令来显示。在这种情况下都是下载的？
如果存在两个未注释的规则，将应用具有最大特异性的一个，如果它们相等，则应用第二个。如果未应用规则 - 请参阅此处：stackoverflow.com/questions/2396909/…
我知道优先级，如果两个图像都加载到浏览器上，我很感兴趣
当然-因此提供的链接