我一直相信(虽然我现在怀疑这些信念的有效性):
div.name
速度比:
.name
但是我最近读到大多数CSS选择器引擎从右到左读取,在这种情况下第一个例子实际上不会更慢？因为选择器引擎会简单地找到每个具有一个名称类的元素,然后必须识别哪些是divs？
CSS选择器引擎通常以哪种方式读取？从左到右还是从右到左？如果他们一般从右到左阅读,有人可以请我解释为什么(我看不出在选择引擎方面从右到左阅读是否有意义)？
Bol*_*ock 11
但是我最近读到大多数CSS选择器引擎从右到左读取,在这种情况下第一个例子实际上不会更慢？
CSS选择器引擎通常读取哪种方式？从左到右还是从右到左？如果他们一般从右到左阅读,有人可以请我解释为什么(我看不出在选择引擎方面从右到左阅读是否有意义)？
坦率地说,几乎不可能分辨出哪个选择器在给定浏览器中会更慢,更不用说浏览器了.性能往往波动并且不可预测,尤其是在这种微观尺度和不可预测的文档结构上.即使我们谈论理论绩效,它最终还是取决于实施.
话虽如此,如Boris Zbarsky对其他问题的回答以及Guffa对你的回答所示,一个典型的浏览器(目前所有主要布局引擎都是如此)需要一个元素并评估所有候选选择器以查看它匹配的那些而不是找到一组与给定选择器匹配的元素.这是一个微妙但非常重要的区别.Boris提供的技术解释不仅非常详细,而且具有权威性(因为他使用的是Firefox使用的引擎Gecko),所以我强烈建议阅读它.
但我认为我应该解决你的问题中似乎另一个问题:
因为选择器引擎会简单地找到每个具有一个名称类的元素,然后必须识别哪些是
divs？
链接的问题解释了为什么选择器一般从右向左
#foo ul.round.fancy li.current读取li.current, ul.round.fancy, #foo,所以读取,但它是否真的在每个元素(.current, li, .fancy, .round, ul, #foo)中从右向左读取？应该是吗？
我从来没有实现CSS,也没有看到其他浏览器如何实现它.我们从上面链接的答案中知道,浏览器使用从右到左的匹配来遍历选择器中的组合器,例如>本例中的组合器:
section > div.second > div.third
如果一个元素是不是div.third,那么就没有一点检查,如果其母公司是div.second其母公司是section.
但是,我不相信这种从右到左的顺序一直向下钻到简单的选择器级别.换句话说,我并不认为浏览器使用从右到左穿过右到左的评价中的评价为一个简单的选择器序列(也被称为化合物选择器)的每个部分串联通过分离化合物的选择器组合子.
例如,考虑这个人为的,高度夸张的选择器:
div.name[data-foo="bar"]:nth-child(5):hover::after
现在,无法保证浏览器必须按以下顺序检查元素的这些条件:
data-foo值为的属性bar？name类吗？div元素吗？除了简单的选择器之外,这个选择器在功能上与上述功能相同,也不一定按以下顺序进行评估:
div:hover[data-foo="bar"].name:nth-child(5)::after
name类吗？data-foo值为的属性bar？div元素吗？由于性能原因,没有理由强制执行此类订单.事实上,我认为通过首先选择某些类型的简单选择器可以提高性能,无论它们在序列中的哪个位置.(你也会注意到::after没有考虑 - 那是因为伪元素不是简单的选择器,甚至从不进入匹配方程式.)
例如,众所周知,ID选择器是最快的.好吧,鲍里斯在他对相关问题的回答的最后一段中说了这一点:
另请注意,浏览器已经进行了其他优化,以避免尝试匹配绝对不匹配的规则.例如,如果最右边的选择器有一个id并且id与元素的id不匹配,那么在Gecko中根本不会尝试将该选择器与该元素匹配:尝试使用"具有ID的选择器"的集合来自元素ID的哈希表查找.因此,在考虑最右边的选择器的标签/类/ id之后,这是70%的具有很好匹配机会的规则仍然不匹配.
换句话说,你是否有一个看起来像这样的选择器:
div#foo.bar:first-child
或这个:
div.bar:first-child#foo
Gecko将始终首先检查ID和类,无论它在序列中的位置如何.如果元素没有ID和与选择器匹配的类,那么它会立即被丢弃.如果你问我,相当快.
那只是Gecko的一个例子.这在实现之间也可能不同(例如,Gecko和WebKit可能与Trident甚至Presto不同).当然,供应商普遍同意的策略和方法(首先检查ID不一定有差别),但细节可能不同.
选择器引擎不查找应用规则的元素,它查找适用于特定元素的规则.因此从右到左阅读选择器是有意义的.
像这样的选择器:
div span.text a.demo
将使选择器引擎执行这些检查以查看选择器是否适用于元素:
a班级的元素demo吗？span该类的元素text？div？| 归档时间： |
|
| 查看次数： |
1381 次 |
| 最近记录： |