javascript - jQuery 遍历优于选择器吗？

Question

使用 $("#vacations").find("li").last() 比 $("#vacations li:last") ?

背景和我的想法:

我正在玩一个很好的互动 try jQuery tutorial其中一项任务说:

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.

为什么我会这么想？对我来说，选择器的使用看起来比遍历要高级一些。在我看来，当我指定一个选择器时，jQuery 如何更好地获得我需要的单一结果(不需要返回中间结果)。

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

Answer 1

对此没有明确的答案，但关于您使用的 :last 选择器，它是 Selectors API 标准的专有扩展。因此，与 native .querySelectorAll 方法一起使用是无效的。

Sizzle 所做的基本上是尝试将您的选择器与 .querySelectorAll 一起使用，如果它由于无效的选择器而抛出异常，它将默认为纯基于 JavaScript 的 DOM 选择/过滤。

这意味着包含像 :last 这样的选择器将导致您无法通过 native 代码获得 DOM 选择的速度提升。

此外，还包括一些优化，因此当您的选择器非常简单时，例如只有 ID 或元素名称，将使用 native getElementById 和 getElementsByTagName，速度非常快；通常比 querySelectorAll 更快。​​

而且由于 .last() 方法只是获取集合中的最后一项，而不是过滤所有项目，这正是 Sizzle 过滤器通常做的(至少他们曾经这样做) ，这也会带来提升。

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

---

对于 $("#vacations").find("li")，不要担心中间结果。这将使用 getElementById 后跟 getElementsByTagName，速度会非常快。

如果您真的非常在意速度，请减少对 jQuery 的使用，并直接使用 DOM。

---

您目前可以在文档中找到有关选择器的注释，例如 :last ，警告您性能损失:

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").

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