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

我正在编写一些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");

$("#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");

或者像这样的代码：

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

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

$("#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");

所以我用了。因此，我确定第一种类型的代码（使用一个长字符串和多个选择器）比第二种类型的代码（一次隐藏一列）快约53%。然而，当我写完它时，它将几乎无法阅读，看起来像这样：

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

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

$("#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社区中有一种普遍接受的处理方法。

这可能取决于代码被点击的频率（它是否在页面生命周期内运行一次？它是否连接到计时器或单击事件或可能导致其多次触发的事件？）

我总是倾向于可读性而不是效率，直到/除非您发现某些代码是一个瓶颈，需要进行优化

还请记住，您的jsperf测试可能会因浏览器和客户端（尤其是旧IE和手机）的不同而有很大的差异。有时，由于ECMA实现的不同，您甚至会看到最新版本的Firefox和Chrome之间的性能有很大的差异

---

最后，53%的差异听起来像是以百分比表示的，但看看毫秒的时间，自己确定这是否可能是应用程序的潜在瓶颈。

绝对重视可读性高于性能。毕竟你使用的是JS。也就是说，你可以以可读的方式提高性能。例如，生成这个选择器使用了一个更容易理解的for循环，而不是一个内联的巨大字符串

---

此外，对于缩小版，您不应覆盖代码。对于任何修改，您仍将返回到非缩小版，对其进行编辑，然后再次缩小。缩小版的代码是针对浏览器的，而不是针对人的眼睛。因此，任何关于其可读性的评论都是无关紧要的。

也许您只需考虑其他编写代码的方法即可t代码和具有两个世界。例如：

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

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

---

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

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

长选择器工作的原因是只创建了一个jQuery对象，并且只能调用一个浏览器方法，从而提高了速度。我猜

document.querySelectorAll

将被使用，并且可以传递整个选择器并返回结果。而jQuery将调用

n

number of

document.querys选择用于
n
调用的
$（）.css
数的所有方法

另一个选项是使用
.add
方法“提高”可读性：

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

虽然我确信这将比多选择器/
css
语句快，但它不会像
document.querySelectorAll
使用一个大选择器的功能那么快。
有趣的是，在进行基准测试时，我发现这种方法实际上比多语句方法慢。我想你可能测试错了……我们e“设置”字段来定义初始变量，否则您也会在测试中引入数组的创建。我在一系列浏览器中进行了尝试，这比多个选择器要快得多。奇怪的是，当我测试@Ian的版本时，没有变量设置，而使用长选择器版本的单个语句，它们执行了大约同样。当我对你的版本进行测试时，速度要慢得多。但是当我直接对Ian的版本进行测试时，速度稍微快了一点。这都是没有预先定义变量的。但是你是对的，在我的实际代码中，我可以只定义一次变量，如果我在JSP中这样做的话，那么执行你们两个人的代码要比多个sta快得多tement one。无论如何，谢谢！您的第一个方法似乎与@elclanrs的非常相似，但性能明显更好。事实上，它的性能甚至比我原来使用长选择器的单个语句还要好。我想知道为什么？@GChorn哈哈，这毫无意义（为什么它比您原来的更快）.我的基本上是生成原始的。但是由于存储在一个数组中，并且必须调用
join
，我认为它可能会慢一些。elclanrs的解决方案稍微复杂一点；我只是尝试以不同的方式存储/检索选择器。哎呀，是的，我注意到当我对这两种方法进行基准测试时，我给出了列表v变量比原始语句中少了两个选择器。现在它们的测试结果大致相同。