jQuery遍历是否优于选择器？ [英] Is jQuery traversal preferred over selectors?

问题描述

使用 $（＃vacations）。find（li）。last（）比 $（更好的做法#vacations li：last）？

背景和我的想法：

我正在玩一个很好的交互式尝试jQuery教程，其中一项任务说：

当您查看代码时，您会注意到其他人正在选择最后一个假期：$（＃vacations li：last ）。你看看这个，你会想，Traversal会让这种方式变得更快！你应该对这些想法采取行动，重构这些代码，使用遍历来查找#vacations中的最后一个li。

为什么我会如此？对我来说，选择器的使用看起来比遍历要高一些。在我的脑海中，当我指定一个选择器时，由jQuery决定如何更好地获得我需要的单个结果（不需要返回临时结果）。

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

解决方案

对此没有明确的答案，但对于您正在使用的：last 选择器，它是Selectors API标准的专有扩展。因此，使用原生 .querySelectorAll 方法无效。

Sizzle的作用是什么基本上尝试使用 .querySelectorAll 的选择器，如果由于选择器无效而抛出异常，它将默认为纯粹的基于JavaScript的DOM选择/过滤。 / p>

这意味着包括像这样的选择器：last 会导致你无法通过本机代码获得DOM选择的速度提升。

此外，还包括优化，以便当您的选择器非常简单时，例如ID或元素名称，本机 getElementById 和 getElementsByTagName ，这非常快;通常甚至比 querySelectorAll 更快。

并且因为 .last（）方法只是抓取集合中的最后一项，而不是过滤所有项目，这就是Sizzle过滤器通常做的（至少他们习惯），这也会提升。

IMO，远离专有的东西。现在 .querySelectorAll 几乎无处不在，只有使用符合标准的选择器才有真正的优势。在DOM选择后进行任何进一步的过滤。

---

在 $（＃vacations）的情况下）.find（li），不要担心中期结果。这将使用 getElementById ，然后是 getElementsByTagName ，并且速度非常快。

如果你真的非常关心速度，减少你对jQuery的使用，并直接使用DOM。

< hr>

您目前在 <$ c $等选择器的文档中找到备注c>：last ，警告你性能损失：

因为：last是一个jQuery扩展而不是CSS规范的一部分，使用：last 的查询无法利用本机DOM提供的性能提升 querySelectorAll（）方法。要在使用：last 选择元素时获得最佳性能，首先使用纯CSS选择器选择元素，然后使用 .filter（：last ）。

但我不同意 .filter（：last）将是一个很好的替代品。更好的是像 .last（）这样的方法，它们将直接定位元素而不是过滤集合。我有一种感觉，他们只是希望人们继续使用他们的非标准兼容选择器。 IMO，你最好忘记它们。

Is using $("#vacations").find("li").last() is a better practice than $("#vacations li:last")?

Background and my thoughts:

I was playing with a nice interactive try jQuery tutorial and one of the tasks says:

As you are looking through your code, you notice that someone else is selecting the last vacation with: $("#vacations li:last"). You look at this and you think, "Traversal would make this way faster!" You should act on those thoughts, refactor this code to find the last li within #vacations using traversal instead.

Why would I think so? For me usage of selectors looks a bit higher level than traversing. In my mind when I am specifying a selector it is up to jQuery how to better get the single result I need (without need in returning interim results).

What is that extra overhead of using composite selectors? Is it because current implementation of selectors logic just parses the string and uses the traversal API? Is parsing a string that slow? Is there a chance that a future implementation will use that fact that it does not need to return interim results and will be faster than traversal?

解决方案

There's no cut and dry answer to this, but with respect to the :last selector you're using, it's a proprietary extension to the Selectors API standard. Because of this, it isn't valid to use with the native .querySelectorAll method.

What Sizzle does is basically try to use your selector with .querySelectorAll, and if it throws an Exception due to an invalid selector, it'll default to a purely JavaScript based DOM selection/filtering.

This means including selectors like :last will cause you to not get the speed boost of DOM selection with native code.

Furthermore, there are optimizations included so that when your selector is very simple, like just an ID or an element name, the native getElementById and getElementsByTagName will be used, which are extremely fast; usually even faster than querySelectorAll.

And since the .last() method just grabs the last item in the collection instead of filtering all the items, which is what Sizzle filters normally do (at least they used to), that also will give a boost.

IMO, keep away from the proprietary stuff. Now that .querySelectorAll is pretty much ubiquitous, there are real advantages to only using standards-compliant selectors. Do any further filtering post DOM selection.

---

In the case of $("#vacations").find("li"), don't worry about the interim results. This will use getElementById followed by getElementsByTagName, and will be extremely fast.

If you're really super concerned about speed, reduce your usage of jQuery, and use the DOM directly.

---

You'll currently find notes in the docs for selectors like :last, that warn you about the performance loss:

Because :last is a jQuery extension and not part of the CSS specification, queries using :last cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :last to select elements, first select the elements using a pure CSS selector, then use .filter(":last").

But I'd disagree that .filter(":last") would be a good substitute. Much better would be methods like .last() that will target the element directly instead of filtering the set. I have a feeling that they just want people to keep using their non-standards-compliant selectors. IMO, you're better of just forgetting about them.

这篇关于jQuery遍历是否优于选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！