选择器在jQuery中获得最佳性能？ [英] Selector for best performance in jQuery?

问题描述

我花了2个小时阅读有关jQuery选择器的在线指南和博客。每个人都说不同的东西，每一个人似乎都是如此肯定。我需要Stackoverflow的专家意见。

  $（'＃my-id div.my-class'）
 
 $（'＃my-id .my-class'）
 
 $（'div.my-class'）
 
 $（'。my-class '）
 
 
< div id =my-id> 
< div class =..> 
< div class =..>太棒了！ < / DIV> 
< div class =my-class> 
< p>我喜欢胡萝卜！ < / p为H. 
< / div> 
< / div> 
< / div> 
  

您认为哪种选择最佳？我还需要一个简短的解释，因为重写数千行代码是危险的。 它发生了这种或那种方式，我只是不想做两次。

另外，如果我想得到< p> ，我应该给它一个类，因为jQuery和CSS从右到左读取选择器？

是否有太多课程这样的事情还是因为人们只是懒惰？

---

如果相同的规则适用于CSS，只需让我知道。一个字就够了。

解决方案

如果你想要的只是与匹配的DOM元素的所有实例.my -class ，然后我认为没有理由你应该使用除以下之外的任何东西：

  $（' .my-class'）
  

其他都是更具体的选择器，可以在需要时使用将选择器缩小到不仅仅是 $（'。my-class'）。

如果你真的那么试图完全优化性能，而不是首先使用jQuery可能不是理想的选择，因为jQuery初始化和jQuery对象的开销往往会减慢速度。您使用jQuery是因为它可以快速编写代码并提供出色的跨浏览器支持和一系列有用的方法。你不使用jQuery来优化性能。

如果你真的想要比较四个jQuery选项的性能，那么你将不得不设计一个代表性的HTML（必须包含许多其他东西才能真正代表现实世界的情况），然后在一些基准测试工具（如jsperf）中测试每个选择器，并在您关注的所有浏览器和jQuery版本中运行该测试您将使用，然后看看您是否可以得出一些特定的结论。

这就像尝试过早优化一样。尽可能简单地编写代码，只有在实际测量到性能问题时才花时间优化性能，并且这是代码中性能瓶颈所在的位置。 99.99％的时间，特定选择器的性能不会在您的代码中产生任何差异。代码简单，没有复杂性。在你实际想要优化代码的0.01％的时间里，你可能会非常关心性能，你要么预先缓存元素列表，要么你不会在jQuery中对它进行编码以避免jQuery对象设置和开销。

这是一个jsPerf：

结论

1. 对于未经证实的正常编码，您实际上遇到了性能问题花时间优化，使用符合您选择目标的最简单的选择器。




2. 如果它真的是性能关键，请使用普通的Javascript，而不是jQuery。

I just spent 2 hours reading online guides and blogs about jQuery selectors. Everybody says different things and every last one of them seem to be so sure. I need an expert opinion from Stackoverflow.

$(' #my-id div.my-class ')

$(' #my-id .my-class ')

$(' div.my-class ')

$(' .my-class ')


<div id="my-id">
    <div class="..">
        <div class=".."> Awesome stuff! </div>
        <div class="my-class">
            <p> I like carrots! </p>
        </div>
    </div>
</div>

Which is the best selector in your opinion? I also need a short explanation because rewriting thousands of lines of code is at stake. It happens one way or another, I just don't want to do it twice.

Also, if I wanted to get <p>, should I give it a class because jQuery and CSS reads selectors from right to left?

Is there even such thing as too many classes or is it because people are just lazy?

---

If the same rules apply to CSS, just let me know. One word is enough.

解决方案

If all you want is all instances of DOM elements that match .my-class, then I see no reason why you should use anything other than:

$('.my-class')

The others are all more specific selectors and can be used if you want to narrow the selector to more than just $('.my-class').

If you're really trying to fully optimize performance, than using jQuery in the first place is likely not the desired choice as the overhead of jQuery initialization and jQuery objects tends to slow things down. You use jQuery because it's quick to code and offers great cross-browser support and a bunch of useful methods. You don't use jQuery to optimize performance.

If you really want to compare the performance of your four jQuery options, then you will have to design up a representative set of HTML (which has to include lots of other things to be truly representative of a real world situation) and then test each of your selectors in some benchmarking tool like jsperf and run that test in all browsers that you care about and with the versions of jQuery that you will be using and then see if you can come to some particular conclusion.

This smells like an attempt at premature optimization. Write your code first as simply as possible and only spend time optimizing performance when you've actually measured that you have a performance issue and that this is the place in your code where the performance bottleneck is. 99.99% of the time, the performance of a particular selector is not going to make one iota of difference in your code. Code simply and without complication first. In the 0.01% of the time that you actually want to optimize your code, you will probably care so much about performance that you will either pre-cache the list of elements or you will not code it in jQuery in order to avoid the jQuery object setup and overhead.

Here's a jsPerf: http://jsperf.com/jquery-selector-comparison-specificity/4. This shows relatively little difference between the options when tested in the latest versions of Chrome, Firefox and IE. There is a slight bias in favor of the $('.my-class') option.

And for reference, you will find that:

document.getElementsByClassName("my-class")

is as much as 50x faster than any of the jQuery options.

Here's a screenshot of the jsperf results in Chrome:

Conclusions

1. For normal coding where you haven't proven you actually have a performance issue that you need to spend time optimizing, use the simplest selector that meets your selection objective.

2. If it's really performance critical, use plain Javascript, not jQuery.

这篇关于选择器在jQuery中获得最佳性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！