javascript - jQuery 链接比单独的语句更快？

Question

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

一个例子：

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

快/慢于

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

Answer 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或filterdo），这将与示例 1 几乎完全相同。

Answer 2

这：

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

可能比这更快：

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

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

这：

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

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

Answer 3

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

Answer 4

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

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

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

var myElement = $('#blah_id');

myElement.doSomething();