使用jQuery提高选择器性能

Question

我一直在看一些站点，他们都在谈论使用标记选择器而不是类来提高性能。

例如，这：

$("input.myclass");

代替这个：

$(".myclass");

例如：

• http://www.artzstudio.com/2009/04/jquery-performance-rules/#use-tags-before-classes
• 改善jQuery选择器性能的好方法？
• http://www.thewebsqueeze.com/web-design-tutorials/improve-your-jquery-selectors-5-quick-tips.html

他们都声称JavaScript仅具有getElementById和getElementsbyTagName而不能直接选择类。

过去3年有没有改变？ 他们现在可以按班级进行选择了吗？ 我正在用jsperf进行测试，看来到目前为止，类选择器的速度更快： http ://jsperf.com/class-vs-input

我还查看了其他人的测试并显示了相同的结果： http : //jsperf.com/selectors-perf/3

去年这些改变了吗？ 我们现在应该按类而不是按标签选择吗？ 在哪里可以看到本机实现类选择器的浏览器版本？

谢谢。

Answer 1

现在已经改变了。

大多数浏览器正在实现：

var matches = document.body.querySelectorAll('div.highlighted > p');

在javascript中实现它们。

那就是jQuery现在使用的东西； 它正在实现sizzle.js，这是一个选择器js库，用于选择是使用querySelector还是常规的getElementsByTagName函数。

例如，对于jquery构造函数$()如果第一个argumemt是字符串： $(iAmAString) ，则如果字符串的第一个字母是# ，则jquery将调用document.getElementById(iAmAString.substr(0)) 。 如果不是，它将让sizzle处理是否根据浏览器的兼容性和字符串的复杂性调用querySelector。

还有很多其他很棒的东西。

选择基本元素，使用基本函数并缓存常用的选择器时，最精确的做法将减少通过该大链和/或绕开整个链时的检查次数。

对于某些网站，这具有产生令人敬畏的独角兽骑行小猫效果的特殊效果，还需说明：

兼容性支持在这里https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll