CSS选择器由浏览器引擎从右到左匹配.因此,他们首先找到孩子,然后检查他们的父母,看看他们是否符合规则的其余部分.
对我来说,最简单的方法是使用元素数量最少的选择器.首先是ID(因为它们应该只返回1个元素).然后可能是类或具有最少节点数的元素 - 例如,页面上可能只有一个跨度,因此可以使用引用跨度的任何规则直接到达该节点.
以下是备份我的说法的一些链接
这听起来像这样做是为了避免必须看到父母的所有孩子(可能是很多孩子),而不是一个孩子的所有父母必须是一个孩子.即使DOM很深,它也只会在每个级别查看一个节点而不是RTL匹配中的多个节点.评估CSS选择器LTR或RTL更容易/更快?
具体在选择器的右侧,而在左侧则不太具体.
// unoptimized
$('div.data .gonzalez');
// optimized
$('.data td.gonzalez');
Run Code Online (Sandbox Code Playgroud)
有人可以解释为什么较不具体的左边作为CSS选择器更快?
这是一个嘶嘶声的事情还是同样适用document.querySelectorAll?
在CSS文件中使用"类似优化"的CSS选择器是否有任何速度提升?
我知道ID是一个比Javascript中的类更快的选择器.但是如果我缓存选择器呢?当缓存选择器时,如果它是类选择器,它的速度是否会不同,或者它是否与id选择器一样快?
例:
<div class=”myclass”></div>
<div id=”myid”></div>
var $myclass = $('.myclass');
var $myid = $('#myid');
Run Code Online (Sandbox Code Playgroud)
$ myid会比$ myclass快吗?