WebKit Inside: CSS 匹配原理是什么？

相关文章 WebKit Inside: CSS 样式表的解析 WebKit Inside: CSS 样式表的匹配时机 WebKit Inside: Acitvie 样式表 当WebView解析完所有外部与内联样式表，就要进入到CSS样式表的匹配阶段。 1 相关类图 WebKit中参与CSS样式表匹配的主要类如下图所示: 1.1 Document Document代表将HTML文件解析后的DOM文档。 1.2 Style::Scope Style::Scope代表整个文档里面的所有样式表。 Style::SCope里面的2个属性: m_styleSheetsForStyleSheetList数组，存储文档里面所有的样式表。 m_activeStyleSheets数组，存储文档里所有生效的Active样式表。 有关Active样式表，可以参看《WebKit Iniside: Active 样式表》。 1.3 Style::Resolver Style::Resolver用来对一个DOM元素Element匹配其相关样式。 ScopeRuleSets管理RuleSet。 ScopeRuleSets里面的2个属性: m_authorStyle存储着所有「作者样式表」的StyleRule。 m_userStyle存着所有「用户样式表」的StyleRule。 1.4 样式表的分类 在这里介绍一下: UserAgent样式表 作者(Author)样式表 用户(User)样式表 Active样式表 之间的关系。 UserAgent样式表就是浏览器内置的样式表。 平时我们即使在HTML页面里面不提供任何样式表，但是显示出来的元素仍具有一些默认样式，就是UserAgent样式表的功劳。 作者样式表就是编写HTML页面的作者提供的样式表，由页面内<link> <style>标签提供。 用户样式表指浏览器通常允许网页浏览者自己编写样式表给页面使用，这样的样式表叫用户样式表。 Active样式表是那些在HTML里面真正起作用，生效的样式表。 Active样式表可能来源于作者样式表，也可能来源于用户样式表。 1.5 RuleSet RuleSet内部分门别类存储各类StyleRule数据。 RuleSet里有许多Map。 Map的key就是StyleRule中的selector名。 Map的value是一个StyleData数组，因为一个selector可能对应多条StyleRule。 从图中可以看到，StyleData持有StyleRule。 1.6 StyleRule StyleRule就是将HTML页面里样式表解析之后的数据结构。 StyleRule的组成如下图所示: 1.7 ElementRuleCollector ElementRuleCollector针对某一个元素Element，收集所有与这个Element相匹配的样式。 最终，所有与这个Element匹配的样式，存储在MatchResult中。 1.8 MatchResult MatchResult存储与某个Element匹配的所有样式，实际上存储的是匹配样式的属性名和属性值。 MatchResult分3个属性分别存储: m_userAgentDeclarations存储userAgent样式表的值。 m_authorDeclarations存储作者样式表的值。 m_userDeclarations存储用户样式表的值。 1.9 Element Element就是要进行样式匹配的元素。 Style::TreeResolver会依次遍历整个DOM树，对DOM树上的每个Element元素进行匹配。 1.10 Style::TreeResolver Style::TreeResolver用来遍历DOM树上的Element元素。 被遍历的Element元素，会进行样式匹配。 1.11 Styleable Styleable在匹配中用处不大，主要是封装了Element，作为函数参数传递。 1.12 Style::Update Style::Update将整个DOM树上，所有Element匹配的样式存储在一个Map中。 Map的key就是Element。 Map的value是ElementUpdate。 1.13 ElementUpdate ElementUpdate封装了最后的匹配结果RenderStyle。 1.14 ResolvedStyle ResolvedStyle主要是作为函数返回值，封装了最后的匹配结果RenderStyle。