javascript - 使用 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 构造函数$() ，如果第一个参数是字符串 : $(iAmAString)，那么如果字符串的第一个字母是 a #，jquery 将调用document.getElementById(iAmAString.substr(0)). 如果不是，它会让 sizzle 根据浏览器的兼容性和字符串的复杂性来处理是否调用 querySelector。

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

在选择元素时最精确，使用基本函数并缓存您经常使用的选择器，将减少通过这条大链时的检查次数，甚至绕过整个链。

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

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