浏览器如何呈现/应用CSS

Question

标题可能有点误导，但我找不到用简短的文字描述它的更好方法。

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

让我们举个简单的例子：

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

那么他会读整个类（.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的内容。