css - css选择器引擎的具体实现

Question

众所周知，过度使用 id css 规则被认为是一种不好的做法。有很多关于这个主题的帖子 - 这里是 latest 之一， 例如。

在此类帖子中，经常提到 css 选择器实际上是由浏览器引擎从右到左解析的。也就是说，如果我们说有选择器#very div，那么浏览器首先找到所有的 div，然后测试它们是否具有具有此 id 的父级。

我的问题由两个相关部分组成。第一部分——这是真的吗？有很多 css 引擎的实现，既有开源的也有专有的，如果对这些引擎有所了解的人能够阐明这个主题，那就太好了。

问题的第二部分是 - 如果它是真的，如果我们真的总是从右到左解析 css 规则，我们为什么要这样做？我根本不是解析专家，但定义选择器的哪一部分更具体(生成较少的输出)并不一定从右边开始过滤不是更方便吗？是太贵了还是怎么的？

Answer 1

Seteve Sounders 做了 some tests不久前，虽然他的测试证实了这一点(至少对于经过测试的浏览器而言)，但它也显示了性能提升的规模。对于 6000 个 dom 元素，使用类与后代相比，最大性能提升为 200 毫秒(非常显着)，平均值要小得多(而且显着性更低)。

该测试还表明，虽然浏览器和引擎之间存在差异(有趣的是性能最佳)，但趋势是相同的。