javascript - 使用 jQuery 提高选择器性能

Question

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

例如，这个:

$("input.myclass");

代替这个:

$(".myclass");

例如:

• > http://www.artzstudio.com/2009/04/jquery-performance-rules/#use-tags-before-classes
• > Good ways to improve jQuery selector performance?
• > 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

这在去年有变化吗？我们现在应该按类别而不是按标签选择吗？我在哪里可以查看 native 实现类选择器的浏览器版本？

谢谢。

Answer 1

现在变了。

大多数浏览器都在实现:

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

在他们的 javascript 实现中。

这就是 jQuery 现在在内部使用的；它正在实现 sizzle.js，选择器 js 库，选择是使用 querySelector 还是常规的 getElementsByTagName 函数；

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

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

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

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

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