jQuery，最佳使用问题

发布于 2024-11-07 18:31:08 字数 456 浏览 0 评论 0原文

我不知道 jQuery 在幕后是如何工作的，但是假设在某个时候我创建了一个 jQuery 对象：

var thingy = $('#thingy');

在代码的更下方，重用 thingy:

thingy.empty();

与仅仅创建又是jQuery？：

$('#thingy').empty();

我想在第二种情况下，我们必须创建另一个 jQuery 对象，但我怀疑这是微不足道的。我试图通过重用变量来避免对匹配元素进行 DOM 搜索。也许这种搜索在任何一种情况下都会发生？

我最初的假设是在创建 $ 对象时扫描文档。但后来我想到 $ 对象可能只是一个迭代器，每次执行其方法之一时它都会再次扫描文档。我想这就是我问题的关键。

原文

I don't know how jQuery works under the hood, but let's say that at some point I create a jQuery object:

var thingy = $('#thingy');

Further down in the code, is there any difference in reusing thingy:

thingy.empty();

versus just making the jQuery again? :

$('#thingy').empty();

I guess in the second case, we have to create another jQuery object, but I suspect that is trivial. What I'm trying to avoid by just reusing the variable is doing a DOM search for matching elements. Perhaps this search occurs in either case anyway?

My initial assumption was that the the document is scanned upon the creation of the $ object. But then it occurred to me that the $ object might just be an iterator that scans the document again every time you execute one of its methods. I guess this is the crux of my question.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暖风昔人 2024-11-14 18:31:08

如果您的选择器是单个对象，那还不错，但是如果您的选择器是 $('.thingy') 呢？每次您再次创建它时，它都会迭代整个文档来查找该类，而不是使用存储的选择。还不错，但随后它会为该选择创建一个新的 DOM 对象。如果有 500 个 .thingy 实例，那么很快就会陷入困境。

ETA：正如 no.good.at.coding 指出的那样，每次使用任何类型的选择器时，都会遍历整个 DOM。所以是的 - 将它存储在一个变量中，调用该变量。

回复收藏 0 原文

凉栀 2024-11-14 18:31:08

这些问题的答案表明，如果重用 jQuery 对象，速度会更快：

回复收藏 0 原文

蓝眼睛不忧郁 2024-11-14 18:31:08

另一件需要考虑的事情是 DOM 更改。确保设置 thingy 后，不会发生导致 $('#thingy') 消失的事情！

回复收藏 0 原文

枕梦 2024-11-14 18:31:08

一般来说，只要您确定选择器的结果不会改变，您就需要“缓存”它们。

您的示例相当简单，因为 #id 选择器已经非常高效（本质上，它只是将其直接传递给 document.getElementById() 调用。

正如其他人提到的，您开始看到当您使用性能较低的选择器（例如 $('.class') ）时，

节省大量额外的处理时间。

var tree = $('.bigTree');

// Do random stuff with tree
// ...

var segment = tree.find('.subsection');

// Do random stuff with segment...

可以例如，变量“segment”能够使用变量树的结果，而无需再次访问整个 DOM，从而节省一点性能，虽然像这样的琐碎示例很少值得付出努力，但请确保您正在做这种事情。 for 代码段（例如循环）可以帮助显着加快您的应用程序的速度。

当然，如果您动态更新 DOM，请确保您使用“新鲜”选择器来确保您拾取任何更改:)。

Generally speaking, you will want to "cache" the results of the selector as long as you're sure they won't be changing.

Your example is fairly trivial, in that the #id selector is already quite efficient (essentially, it just passes it straight to a document.getElementById() call.

As others have mentioned, you start to see the savings when you use less performant selectors (such as $('.class') ).

By using variables in this way, you're able to save a lot of additional processing. ex:

var tree = $('.bigTree');

// Do random stuff with tree
// ...

var segment = tree.find('.subsection');

// Do random stuff with segment...

In the above example, the variable "segment" is able to use the results of the variable tree, without having to access the whole DOM again, saving you that bit of performance. While trivial examples like this are rarely worth the effort, making sure you are doing this sort of thing for bits of code (such as loops) can help speed up your application significantly.

Of course, make sure that if you are dynamically updating the DOM, that you are using a "fresh" selector to ensure you pick up any changes :)

回复收藏 0 原文

~没有更多了~