jQuery遍历是否优于选择器?

正在使用$(“#休假”)。查找(“li”).last()$(“#休假li:last”)更好吗

背景和我的想法:

我正在玩一个很好的交互式try jQuery教程,其中一个任务是:

在查看代码时,您注意到其他人正在使用:$(“#vacations li:last”)选择最后一个假期。当你看到这一点时,你会想,“遍历会让这条路变得更快!”你应该按照这些想法行事,重构这段代码,用遍历来查找假期中的最后一个li

为什么我会这么想?对我来说,选择器的使用看起来比遍历更高级。在我看来,当我指定选择器时,如何更好地获得所需的单个结果取决于jQuery(无需返回中间结果)

使用复合选择器的额外开销是什么?是不是因为选择器逻辑的当前实现只是解析字符串并使用遍历API?解析字符串有那么慢吗?未来的实现是否有可能使用这样一个事实,即它不需要返回临时结果,并且比遍历更快

这个问题没有简单的答案,但是关于您使用的:最后一个选择器,它是选择器API标准的专有扩展。因此,与本机.querySelectorAll方法一起使用是无效的

Sizzle所做的基本上是尝试将选择器与.querySelectorAll一起使用,如果它由于无效选择器引发异常,它将默认为纯粹基于JavaScript的DOM选择/过滤

这意味着包含像:last这样的选择器将使您无法使用本机代码提高DOM选择的速度

此外,还包括一些优化,当您的选择器非常简单时,比如一个ID或一个元素名,就会使用本机的getElementByIdgetElementsByTagName,速度非常快;通常比querySelectorAll更快

由于.last()方法只是获取集合中的最后一个项目,而不是过滤所有项目,这是Sizzle过滤器通常所做的(至少以前是这样),这也将起到推动作用

依我看,远离专有物品。既然.querySelectorAll几乎无处不在,那么只使用符合标准的选择器确实有好处。在DOM选择后执行任何进一步的筛选


对于$(“#假期”).find(“li”),不要担心中期结果。这将使用getElementById,后跟getElementsByTagName,速度非常快

如果您真的非常关心速度,那么减少jQuery的使用,直接使用DOM


您当前可以在文档中找到选择器的注释,如:last,这些注释警告您性能损失:

因为:last是jQuery扩展,而不是CSS规范的一部分,所以使用:last的查询无法利用本机DOMquerySelectorAll()方法提供的性能提升。要在使用:last选择元素时获得最佳性能,请首先使用纯CSS选择器选择元素,然后使用.filter(“:last”)

但是我不同意.filter(“:last”)是一个很好的替代品。更好的方法是像.last()这样直接以元素为目标的方法,而不是过滤集合。我有一种感觉,他们只是希望人们继续使用不符合标准的选择器。依我看,你最好忘了他们

发表评论