CSS和DOM在浏览器中是如何实现的？

Question

这是一个相当学术的问题。我想知道浏览器是如何实现的，即使用了哪些数据结构或算法来将CSS选择器映射到特定的DOM元素。这是通过哈希表完成的吗？DOM子节点如何知道应用于父节点的样式也适用于它本身等等。我一直在查看Mozilla开发者中心，但没有找到相关资料。如果有任何文献或书籍与此相关，将不胜感激...谢谢！

- Jlam

Answer 1

匹配答案是“哪些选择器与给定节点匹配”，而不是“哪些节点与选择器匹配”。这让您可以简单地针对当前节点评估选择器的每个部分（比较节点名称/ID/类）。通过扫描父节点来完成后代组合器和继承。

如果您有兴趣了解接下来会发生什么，WebKit 博客有一系列不错的文章: WebCore 渲染基础

- Kornel

Answer 2

所以这里是稀缺的文档：

• http://www.mozilla.org/newlayout/doc/style-system.html
• https://developer.mozilla.org/en/Mozilla_Style_System

从你的问题来看，似乎你应该先学习更多关于CSS应该如何工作的知识（例如规则特异性、计算样式等）。

- Nickolay

---

我非常了解CSS在规则特异性、计算样式方面的工作原理。我对渲染引擎的实际实现细节很感兴趣。你的回答在这方面没有提供任何信息。 - Jlam

@Jlam：感谢您在3.5年后回来告诉我这件事！如果我的话冒犯了您，那我很抱歉，但您的问题并没有表达得很清楚，在深入实现之前，您确实需要了解CSS。值得一提的是，我通过阅读这些页面，然后通过Ewan答案中链接的实现方式来学习Mozilla的样式系统是如何工作的。 - Nickolay

Answer 3

你提到了Mozilla。在具体的实现上回答你的问题肯定比抽象概念更容易理解。

用什么数据结构或算法将CSS选择器映射到特定的DOM元素...是通过哈希表完成的吗？

我想，针对FF2版本，直接回答你的问题可能会在Firefox源代码的样式目录中找到。在该目录中搜索"哈希表"可以在7个文件中找到111个结果。

我确信哈希表广泛地与渲染CSS样式相关的一些过程有关。

因此，简短地回答你的问题是，“是的，但其中涉及的不仅仅是哈希表。”

- Ewan Todd

Answer 4

W3C提供了一个从定义角度来看的通用方法，我认为这很有启发性：

• 分配属性值
• 选择器
• 等等

- Tyler Wright