jquery - jQuery 性能：分组选择器与单个选择器

Question

采取以下html：

<div class='div1'/>
<div class='div2'/>
<div class='div3'/>

现在假设我想使用 jQuery 隐藏这些元素.hide()。性能明智的是将 3 分组为单个选择器更好。

$('.div1, .div2, .div3').hide();

或者运行 3 个单独的选择器。

$('.div1').hide();
$('.div2').hide();
$('.div3').hide();

为了代码可读性，我更喜欢第二种方法，但我怀疑前一种方法更快？

此外，选择的类型是否会影响这里的结果。例如，使用类标记名和 id 混合进行分组选择？

$('.myClass, a, #myId').hide();

vs 单独的选择器。

$('.myClass').hide();
$('a').hide();
$('#myId').hide();

score 4 · Accepted Answer

将 3 分组为一个选择器会更好吗？

它们之间的唯一区别是一个比另一个更具可读性（正如您已经喜欢的那样），您可以根据您的选择使用任何人，因为它们在性能上没有太大差异-

在此处输入图像描述

选择的类型会影响这里的结果吗？

不，这对结果没有任何影响——

score 0 · Accepted Answer

这是基准

看起来分组稍微快一些。

Mixed Individual: 8ms
Mixed Grouped: 6ms
Individual: 15ms
Grouped: 9ms

score 0 · Accepted Answer

这是你的答案：

谷歌搜索“jsperf Jquery 选择器性能”会产生许多不同的测试用例，涵盖各种性能运行。

一般来说，Jquery 选择器必须拆分成它们各自的组件进行处理。因此，当它们都在一个选择器中时，这会导致成本略有增加。

除非您遇到性能问题，否则不必担心这一点。专注于可读性。