与“getElementsByClassName”相比,jQuery 中的类选择器出奇地慢。 +基准测试
我正在为 CMS 编写一些测试,我需要知道文档中是否存在某个类名。
所以我去研究检查文档中是否存在类名的最快方法是什么。您可以在这里查看我的基准: http://jsperf.com/if-class-exists
如果你运行测试,你会发现“getElementsByClassName”是迄今为止最快的(99%)。这让我想知道 jQuery 是否会检查是否有可用的本机类选择器。
这让我想知道什么是最好的方法,因为快速测试类名对我来说至关重要。
I'm writing some tests for a CMS, and I need to know if a certain classname is in the document.
So I went to investigate what is the fastest way to check if a classname exists in the document. You can see my benchmarks here: http://jsperf.com/if-class-exists
If you run the test, you'll see 'getElementsByClassName' is by far the fastest(99%). This made me wonder if jQuery even checks if there is a native class selector available.
This leaves me wondering what is the best approach, as it is crucial for me to test classnames really fast.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我想你已经用 jsperf 回答了你自己的问题。如果在特定操作中速度对您来说确实很重要,并且此测试可以有效衡量您的需求,那么请对
getElementsByClassName
进行您自己的测试,并在可用时使用它,因为它在您的 jsperf 中显示速度提高了 400 倍。jQuery 调用有相当数量的设置开销,如果您单步执行,您就可以看到这一点。我可以想象在一个小文档中,这种设置开销可能会以一种在具有更大 DOM 的文档中不会出现的方式扭曲您的 jsperf 结果 - 所以我建议您使用更大的 DOM 验证您的结果这可能是您将调用此文件的更典型的文件。
根据 this doc,jQuery 应该使用
getElementsByClassName
来实现简单的类选择器。编辑:我在 jQuery
$('.select')
中单步执行了这个函数调用。它在内部使用 getElementsByClassName ,但是在它到达那里之前有很多开销(甚至包括运行复杂的正则表达式),因为 jQuery 令人难以置信的一般性质(它必须测试很多东西才能弄清楚你想要的是一个简单的类名选择器)。我认为如果你向 jsPerf 添加一个大的 DOM,性能差距可能会缩小,因为 jQuery 设置开销将占整体执行时间的一小部分,但我没有看到太大的变化。单独调用的
getElementsByClassName('.selector')
比jQuery('.selector')
快得多。I think you've already answered your own question with the jsperf. If speed is really important to you in a particular operation and this test is a valid measure of what you need, then do your own test for
getElementsByClassName
and use it if available as it shows 400x faster in your jsperf.jQuery calls have a reasonable amount of setup overhead that you cans see if you ever step through one. I could imagine in a small document that this setup overhead might skew your jsperf results in a way that wouldn't be seen as much in a document with a much larger DOM - so I'd suggest you verify your results with a much larger DOM that might be more typical of the documents you will be calling this on.
According to this doc, jQuery should be using
getElementsByClassName
for a simple class selector.Edit: I stepped through this function call in jQuery
$('.select')
. It is using getElementsByClassName internally, but there is a LOT of overhead before it gets there (including even running a complicated regular expression) because of jQuery's incredible general nature (it has to test a lot of things before it figures out that what you want is a simple class name selector).I thought that if you add a big DOM to your jsPerf, the performance gap might narrow because the jQuery setup overhead will be a much smaller part of the overall execution time, but I didn't see much change. The
getElementsByClassName('.selector')
called all by itself is just way faster thanjQuery('.selector')
.