浏览器如何呈现/应用 CSS

Question

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

问题是，如果浏览器为相同的属性赋予多个值，那么他如何真正应用 CSS 规则。

让我们举个简单的例子：

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

那么他是阅读整个 class (.foo) 并渲染它，还是像 "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的内容。

浏览器如何呈现/应用 CSS

How does a browser render / apply CSS

css

browser

rendering

render