浏览器是否在解析 css 或形成规则后请求图像？

【问题标题】：Does browser request images as css is parsed or after rules are formed?浏览器是否在解析 css 或形成规则后请求图像？
【发布时间】：2012-07-27 00:55:29
【问题描述】：

当浏览器解析 css 时，它是在遇到资源时加载资源，还是在读取 css 文件并构建一组有效规则后加载资源？

这是一些 css，它使用图像用于 IE，但 RGBA 背景用于支持它的浏览器。我认为 IE 将忽略 rgba 值并加载图像，而其他浏览器永远不会请求图像。这是真的吗？

background:transparent url('../img/content/black-mask.png') repeat top left;
background:rgba(0,0,0,0.7);

【问题讨论】：

【解决方案1】：

浏览器在将样式表应用到文档结构时总是首先生成“计算样式”。因此，您所选框的 background-image: 属性将始终为空，因为速记 background: 属性清除了 background-image 属性，因为您没有在第二行中设置任何内容 - 因此取消了第一行。

但是，即使使用计算样式，浏览器也不一定会下载图像。尝试在:hover psuedo-class 中使用不同的图像，您会注意到浏览器下载它时会出现延迟。

@Andre 是正确的，因为它主要是一个实现细节，但很多行为是由 CSS 规范定义的（例如计算样式的东西）。

我想更多的浏览器可能希望通过抢先下载样式表引用的资源来改善浏览体验，但你不能指望它（移动浏览器可能永远不会这样做来消耗更少的数据，如果它们在蜂窝网络上网络）。

【讨论】：