多选择器与单选择器性能

Question

我已经尝试找到一个答案,我找到了相关的问题,虽然他们确认了我的发现(一个多选择器调用比多个单选择器调用慢)但没有一个告诉我原因.

基本上,当你运行这段代码时:

$("#one, #two").hide();
$("#one, #two").show();

反对这段代码:

$("#one").hide();
$("#two").hide();
$("#one").show();
$("#two").show();

然后后者将更快约50%.

但是,一旦我们添加第三个选择器,性能差异就会快39%.

第四选择器差异:快26%.

第五:快30%.

第六:快31%.

十:快31%.

(注意这些值似乎在约5%的范围内)

所以我们得到的东西看起来像这样:

表现似乎在6个左右的选择器中稳定.它似乎永远不会比通过一次通话完成每一次的速度快31%.这是为什么？

就个人而言,我喜欢每次通话使用多个选择器,但它似乎有(相对)大的性能命中.什么时候(不)适合使用？

Answer 1

在这两种情况下,您都可以使用ID进行操作,因此可以将其转换为本机getElementById调用.

但是,在第一种情况下,必须做2件事

1. 必须处理昏迷,因此需要额外的解析
2. 必须合并2个结果,jQuery断言它们以与DOM中相同的顺序返回

我想第二次操作占用的时间最多.