jquery 父后代选择器

发布于 2024-09-15 03:16:18 字数 111 浏览 6 评论 0原文

为什么1比2快?

  1. $('#p1').find('span');
  2. $('#p1 span');

Why is 1 faster than 2?

  1. $('#p1').find('span');
  2. $('#p1 span');

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

陈甜 2024-09-22 03:16:18

在 jQuery 1.4 中,将检查选择器是否是 id 选择器(如您的 #p1)。

  • 如果确实如此,则调用 document.getElementId(...) 并将结果包装在 jQuery 实用程序对象中并返回。
  • 如果不是这样,jQuery 会调用 Sizzle 然后执行任何操作来查找元素。而且,从来源来看,这并不是一件简单的事情。

In jQuery 1.4 the selector is checked if it is an id selector (like your #p1).

  • If it indeed is, the document.getElementId(...) is called and result is wrapped in jQuery utility object and returned.
  • If it is anything other than that, jQuery calls Sizzle which then does whatever it does to find the elements. And, judging from the source, this is pretty non-trivial stuff.
物价感观 2024-09-22 03:16:18

最好的方法就是测试!

通过这个简单的测试:

  • 内容 -

    Test

  • 循环 100,000 次
  • 版本:jQuery 1.4.2

  • $('#p1').find('span');: 2601ms

  • $('#p1 span');:

1998ms在这种情况下,单个选择器似乎更快,因为您没有通过 jQuery 进行那么多调用,这是有道理的。

在这里尝试一下,看看你的控制台


例如,您使用的是 jQuery 1.3.2,结果如下:

  • $('#p1').find('span');: 3225ms
  • $('#p1 span');:2082ms

在此处尝试使用 1.3.2

The best way is to test!

From this simple test:

  • Content - ​<p id="p1"><span>Test</span></p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
  • Looping 100,000 times
  • Version: jQuery 1.4.2

  • $('#p1').find('span');: 2601ms

  • $('#p1 span');: 1998ms

It appears that the single selector is faster in this case, since you're not making as many calls through jQuery this makes sense.

Give it a try here, look at your console.


In cae you're on jQuery 1.3.2 here's those results:

  • $('#p1').find('span');: 3225ms
  • $('#p1 span');: 2082ms

Try it out with 1.3.2 here.

原来分手还会想你 2024-09-22 03:16:18

在您的情况下,也许 #1 比 #2 更快,但根据迭代次数和要搜索的元素数量,在其他情况下 #2 很可能比 #1 更快。

例如:我猜如果你有 3 个 span 元素并且 #p1 中没有其他元素,那么 #1 会比 #2 更快,因为 find 并不试图尽可能多地进行 CSS 匹配。但是,如果您有 1000 个 span 元素,以及 #p1 中的 2000 个其他元素,我敢打赌 #2 会更快,因为它不必迭代对每个元素进行两次。

In your case, perhaps #1 is faster than #2, but depending on how many iterations and how many elements to search, #2 could very well be faster than #1 in other scenarios.

E.g.: I would guess if you had 3 span elements and no other elements in #p1, then #1 would be faster than #2, since find isn't trying to do as much CSS matching. But, if you had 1000 span elements, along with 2000 other elements in #p1, I'll bet #2 would be faster, since it doesn't have to iterate over every element twice.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文