浏览器如何呈现/应用 CSS

Question

标题可能有点误导，但我找不到更好的简短描述方式。

问题是，如果浏览器为同一属性提供了多个值作为一个值，他如何真正应用 CSS 规则。

让我们举个简单的例子：

.foo {
  border-color: green;
  border-bottom-color: black;
  border-bottom-color: blue;
}

他是读取整个类 (.foo) 并在 THEN 渲染它，还是采用单一属性，如“border-color: green;”？并渲染它，然后将底部渲染为黑色，然后再渲染一次蓝色？

我为什么要问这个？我想知道 classB 是否比 classA 性能更高（参见下一个示例），因为您将使用更少的代码来加载。但这只有在它不会一遍又一遍地渲染同一个属性时才有意义。

.classA {
  border-top-color: black;
  border-right-color: white;
  border-bottom-color: black;
  border-left-color: black;
}

.classB {
  border-color: black;
  border-right-color: white;
}

Answer 1

当浏览器显示一个文档时，它必须将文档的内容与其样式信息结合起来。它分两个阶段处理文档：

• 浏览器将 HTML 和 CSS 转换为 DOM（文档对象模型）。 DOM 代表计算机内存中的文档。它将文档的内容与其样式相结合。
• 浏览器显示 DOM 的内容。