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

Question

这是一个非常学术性的问题。我想知道浏览器是如何实现的，因为使用什么数据结构或算法将CSS选择器映射到特定的DOM元素。它是通过哈希表完成的吗？ DOM子节点如何知道应用于父节点的样式也适用于自身等。我一直在关注Mozilla开发人员中心并且没有找到任何内容。关于这个主题的任何文件或书籍将非常感谢...谢谢！

Answer 1

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

如果您对接下来发生的事情感兴趣，那么WebKit博客就有了很好的系列：WebCore rendering basics

Answer 2

所以这里是稀缺的文档：

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

从你的问题看来，你应该首先了解CSS应该如何工作（例如什么是规则特异性，计算风格）。

Answer 3

你提到Mozilla。在特定的具体实现的上下文中，回答您的问题肯定更容易，而不是所有可能实现的抽象概念。

  

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

我认为对于FF2，你的问题的直接答案很可能是在firefox源代码的style directory中。在该目录中搜索"hashtable"会产生111个结果，包含7个文件。

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

所以对你的问题的简短回答是，“是的，但它不仅仅是哈希表。”

Answer 4

W3C从定义的角度提供了一种通用的方法，我发现它具有丰富的信息：

• Assigning property values
• Selectors
• etc