性能 vs 可读性：jQuery/JS 中的多个选择器 vs. 多个语句

Question

我正在编写一些 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 创建了一个性能测试用例。有了这个，我确定第一种类型的代码（使用一个带有多个选择器的长字符串）比第二种类型的代码（一次隐藏一个列）快 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社区。

Answer 1

您可以将选择器存储在一个数组中，然后在需要时加入它们：

var selectors = [
    "selector 1",
    "selector 2",
    "selector 3"
];
$(selectors.join(", ")).css("display", "none");

长选择器起作用的原因是只创建了一个 jQuery 对象，并且只能调用一种浏览器方法，从而提高了速度。我猜document.querySelectorAll会被使用，并且可以传递整个选择器并返回结果。虽然 jQuery 会为调用n次数调用document.querySelectorAll方法n数$().css。

另一种选择是使用该.add方法来“提高”可读性：

var selectors = $("selector 1");
selectors.add("selector 2");
selectors.add("selector 3");
selectors.css("display", "none");

虽然我确信这会比多个选择器/css语句快，但它不会像document.querySelectorAll一个大选择器的能力那么快。