Question

这可能是一个基本问题，但令人困惑的是：多个选择器是否比jquery中的单个选择器更优选？我有以下代码。

$('#sample_1').css('border', '1px solid #00ffff');
$('#sample_2').css('border', '1px solid #00ffff');
$('.sample_3').css('border', '1px solid #00ffff');

将这些连接起来的优势确实如下。在一篇文章中，它给出了处理逗号然后合并结果可能需要时间，因此这种连接形式需要更多时间。是这样吗？这会真正提升性能吗？或者这对代码简单性更有利吗？

$('#sample_1, #sample_2, .sample_3').css('border', '1px solid #00ffff');

Answer 1

第一个代码段与第二个代码段的区别在于对单个函数调用的3个函数调用。

显然，JQuery可以通过第二种方式调用

Answer 2

第二个优点是您只需访问并遍历整个DOM树一次，这将提高性能。当您想提高浏览器应用程序的性能时，减少DOM访问是主要因素之一。

例如，当您使用JQuery创建具有很多像这样的单元格的表时：

var table = $('<table>');
for(var i = 0; i < 1000; i++){
   var row = $('<tr>');

   for(var j = 0; j < 10; j++){
      var col = $('<td>MyCell</td>');
      row.append(col);
   }

   table.append(row);
}

您可以通过删除大量的JQuery $（'...'）调用，串联一个大字符串并将该字符串作为html添加到表中来创建高性能的提升

var table = $('<table>');
var htmlString = "";
for(var i = 0; i < 1000; i++){
   htmlString += '<tr>';

   for(var j = 0; j < 10; j++){
      htmlString += '<td>MyCell</td>';
   }
   htmlString += '</tr>';
}
table.html(htmlString);

在上面的示例中，创建了1万个单元，性能可以提高99％。当您只减少2个对$（'...'）的调用时，除非您的代码处于循环内，否则性能提升不会很明显。

Answer 3

我认为在这个特殊的用例中，您认为逗号可能比单独的查询花费更多的时间是无效的，因为在这两种情况下，它都可以很好地执行，但是更优化的方式是第二种因为DOM只会更改一次，而对于3个单独的查询，DOM会更新三次，这将非常昂贵。

多个选择器是否比jquery中的单个选择器更优选？

3 个答案: