4

我正在编写一些 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 社区。

4

4 回答 4

5

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

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' 使用一个大选择器的能力那样快。

于 2013-04-09T05:46:37.127 回答
3

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

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

$('#table tr *')
  .filter(':nth-child('+ nth.join('),:nth-child(') +')')
  .css('display', 'none');
于 2013-04-09T05:10:10.447 回答
2

它可能应该取决于该代码被命中的频率（它是否在页面的生命周期中运行一次？它是否附加到计时器或点击事件或可能导致它多次触发的东西？）

我总是倾向于可读性而不是效率，直到/除非您确定某段代码是瓶颈并且需要优化。记住关于过早优化的经典编程课程。

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

最后，53% 的差异听起来像是用百分比表示的很多，但请查看以毫秒为单位的时间，并自行确定这是否可能成为应用程序的潜在瓶颈。

于 2013-04-09T05:04:57.343 回答
2

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

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

于 2013-04-09T05:05:13.923 回答