javascript - jQuery/JS 中的性能与可读性 : multiple selectors vs. 多条语句

我正在编写一些 jQuery 代码，可以同时隐藏或显示大表中的多个表列。我想知道使用这样的代码是否会更快:

$("selector 1, selector 2, selector 3").css("display", "none");

或这样的代码:

$("selector 1").css("display", "none");
$("selector 2").css("display", "none");
$("selector 3").css("display", "none");

所以我使用了 jsperf.com to create a performance test case 。有了这个，我确定第一种类型的代码(使用一个带有多个选择器的长字符串)比第二种类型的代码(一次隐藏一个列)快约 53%。但是，当我写完它时，它将变得难以阅读，看起来像这样:

$("#table tr *:nth-child(4), #table tr *:nth-child(5), #table tr *:nth-child(6), #table tr *:nth-child(7), #table tr *:nth-child(8), #table tr *:nth-child(9), #table tr *:nth-child(10), #table tr *:nth-child(11), #table tr *:nth-child(12)").css("display", "none");

所以我的问题是，对于 jQuery/JS 代码来说，哪个是更大的邪恶——低效的性能，或者缺乏可读性？我的背景是 Python，所以我倾向于将可读性置于性能之上，而 53% 在现实世界中似乎并不是一个巨大的下降。但另一方面，我计划在部署后缩小我的 JS 代码，因此无论如何它最终都不会可读......尽管我知道那里有可以将我的代码恢复到原始可读或不可读的形式。正如你所看到的，我可以围绕这个话题在圈子里谈论自己，我不打算开始辩论或讨论，所以我只是在这里发布这个，以防在 jQuery/JS社区。

最佳答案

也许您只需要考虑编写该代码的替代方法并拥有两个世界。例如:

var nth = [4,5,6,7,8,9,10,11,12];

$('#table tr *')
  .filter(':nth-child('+ nth.join('),:nth-child(') +')')
  .css('display', 'none');

关于javascript - jQuery/JS 中的性能与可读性 : multiple selectors vs. 多条语句，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15893644/