jQuery元素选择器

Question

这两个代码块是否存在显着的性能差异？

var element = $("#some-element");

SomeMethod1(element);
SomeMethod2(element);
SomeMethod3(element);

和...

SomeMethod1($("#some-element"));
SomeMethod2($("#some-element"));
SomeMethod3($("#some-element"));

Answer 1

这取决于significant的含义。

第一个代码段总是比第二个快，因为多次调用$()会产生成本（因为jQuery不会缓存先前调用的结果）。是否重要取决于您的性能要求。

Answer 2

这在DOM中进行元素查找并创建一个jQuery对象。

var element = $("#some-element");

在第一个中， 重新使用 此对象。

在第二个中，它必须执行 查找和创建3次 ，因此第一个是更好的性能。

Answer 3

它并不重要但也不可忽略不计。在这种情况下，因为你正在使用id选择器，它不会有太大的区别，但如果你要使用类选择器或属性选择器，那么它将产生很大的不同。

第一个将始终为您提供比第二个更好的性能，因为您在多个位置重用相同的对象。

Answer 4

是。第一个更快，第二个更慢

为什么？

因为首先只搜索一次元素，第二次搜索

Answer 5

后期：

1. 3个字符串创建（持有选择器的字符串文字）
2. 对$()的3次函数调用，每次调用都会在
中产生更多的函数调用
3. 3次搜索文档中的相同元素

鉴于使用的选择器的类型，我不会说它是重要的，但后者需要更多的处理时间并使用更多内存（参见上面的列表）。而这些东西的总和超过了应用程序的大小。

使用较少的直接选择器，它可能会变得更快。

编辑：然而，后者是丑陋的，让我疯了。 ：）

Answer 6

好吧，第一个代码段会重复使用$("#some-element")的第一个调用，而另一个代码需要三次查找#some-element。