CSS选择器背后的订阅模型？

Question

使用CSS选择器,选择器字符串可以body > h1.span预订树中特定类型的节点.有谁知道这是怎么做的？

用于转换的选择器,浏览器如何选择结果集？是否有提高效率的技巧？

我想存在节点订阅的整个结构的某种分层类型树,以及在进行选择器查询时使用的结构 - 但这只是猜测.

有谁知道真正的答案？或者更有趣的是,基于jQuery/CSS搜索查询在树上进行动态查找的最佳方法是什么？

Answer 1

根据DOM,大多数主流浏览器根据页面中的元素处理页面并创建文档层次结构或文档树.在应用CSS时,它们通常迭代文档树,在每个元素的基础上工作,并在每个元素的样式表中对候选选择器执行从右到左匹配,然后根据CSSOM应用基于这些匹配的CSS规则.这意味着对于一个选择器body > h1.span,例如,浏览器首先检查每个元素以查看它是否是h1一个类span,然后检查它是否是它的直接后代body.

根据实现,可能会有一些优化来过滤更可能的非匹配情况.例如,在尝试任何其他匹配例程之前检查命名空间,标记名称,ID或类名称,因为这些是区分元素的最常用方法.

这种每元素匹配模式允许浏览器有效地"选择"选择器来更改DOM中的更改,因为所有浏览器都需要做(我想)是查看DOM中的更改并应用规则并重排元素相应地改变了.

但是,这过度简化了它.它还主要指样式表中的选择器匹配.它没有描述每个选择器实现,因为规范没有定义实现.

例如,浏览器以不同的方式实现Selectors API(document.querySelector()等),即使它使用CSS选择器来查询DOM.特别是,没有任何订阅模型; Selectors API方法返回的节点列表不会动态更新.从§6.2查找元素:

方法NodeList返回的对象querySelectorAll()必须是静态的,而不是实时的([DOM-LEVEL-3-CORE],第1.1.1节).对基础文档结构的后续更改不得反映在NodeList对象中.这意味着该对象将包含创建列表时Element文档中的匹配节点列表.

根据本网站上的一些答案,jQuery似乎也会对选择器进行从右到左的匹配,但我没有找到任何支持来源.它还有许多优化,例如body首先读取ID选择器等.与Selectors API一样,jQuery返回一个静态的节点列表,这些节点在调用其选择器引擎时匹配; 它不会订阅DOM中的更改并相应地更新节点列表(如果您需要订阅DOM更改并委托事件处理程序,则需要使用.on()或使用与选择器类似的方法).

值得注意的是,jQuery采用的一个主要优化是首先按照选择器API来匹配选择器.这意味着它使用浏览器的本机实现而不是JavaScript.如果选择器是有效的CSS并且受支持,则document.querySelectorAll()返回节点列表.如果它出错了,jQuery会回到它自己的选择器引擎Sizzle,用于查询DOM.

同样,它与浏览器的CSS选择器的实现并不完全相同,特别是因为jQuery选择器和CSS选择器不是同一个东西,即使一个是另一个的改编.