jQuery 链接比单独的语句更快？答案

【问题标题】：jQuery chaining faster than separate statements?jQuery 链接比单独的语句更快？
【发布时间】：2011-04-03 20:51:03
【问题描述】：

分别编写对 jQuery 函数的调用还是使用单个链更快？如果添加解释为什么一个比另一个快，将不胜感激:-)

一个例子：

$('#blah_id').niftyjQueryMethod1().niftyjQueryMethod2();

比快/慢

$('#blah_id').niftyjQueryMethod1();
$('#blah_id').niftyjQueryMethod2();

【问题讨论】：

第二种情况是让选择器运行两次。即使有缓存，第一种情况看起来更快

标签： javascript jquery performance method-chaining

【解决方案1】：

在您的示例中，链接速度更快。

// Example 1
$('#blah_id').niftyjQueryMethod1().niftyjQueryMethod2();

// Example 2
$('#blah_id').niftyjQueryMethod1();
$('#blah_id').niftyjQueryMethod2();

在示例 1 中，创建 jQuery 对象 ($('#blah_id')) 的调用只进行了一次。在示例 2 中，它被制作了两次。这意味着第二次调用会更慢。

如果你不想把它们都放在一个链中，你可以将选择缓存在一个变量中：

var blah = $('#blah_id');
blah.niftyjQueryMethod1();
blah.niftyjQueryMethod2();

假设这些方法不影响选择选择中存在的元素（例如，parent、find 或 filter 做）这将与示例 1 几乎完全相同.

【讨论】：

我展示了使用事件委托和相当复杂的页面链接速度快 3 倍（webkit 或 firefox）。 jsperf.com/jquery-chaining-with-event-delegation

【解决方案2】：

这个：

$('#blah_id').niftyjQueryMethod1().niftyjQueryMethod2();

可能比这更快：

$('#blah_id').niftyjQueryMethod1(); $('#blah_id').niftyjQueryMethod2();

但不是因为链接。这是因为选择器查找是有成本的。

这个：

var $blah = $('#blah_id');
$blah.niftyjQueryMethod1();
$blah.niftyjQueryMethod2();

与第一个示例的速度可能没有明显差异。

【讨论】：

也是一个很好的答案。希望我可以将两者都设置为答案。谢谢！

【解决方案3】：

第一个更快。在第二个选择器中创建了一个 jQuery 对象两次。如果$('#blah_id') 被缓存并存储为变量var $blah = $('#blah_id')，然后在你的第二个选择器中使用$blah 而不是$('#blah_id')，那么它不会有真正的区别。

【讨论】：

【解决方案4】：

是的，链接更快，因为找到的 DOMElement（通过$('#blah_id')）只是直接将表单函数传递给函数。

如果将它们分开，则必须一次又一次地找到 DOMElement。每个$("selector") 都是邪恶的。尽量避免它们。

您甚至可以设置对先前找到的对象的引用：

var myElement = $('#blah_id');

myElement.doSomething();

【讨论】：