将jQuery元素存储在变量中更有效吗？

Which is more efficient please?

请问哪个效率更高？

var myElement = $("#the-name-of-my-element")

myElement.doSomethingOnce;
myElement.doSomethingTwice;
...
myElement.doSomethingTenTimes;

要么

$("#the-name-of-my-element").doSomethingOnce;
$("#the-name-of-my-element").doSomethingTwice;
...
$("#the-name-of-my-element").doSomethingTenTimes;

I have a page in which the html elements have many varied and sometimes repeated interactions with the JS so I'm wondering if storing the element in a variable prevents multiple jQuery "queries".

我有一个页面，其中html元素有许多变化，有时与JS重复交互，所以我想知道是否将元素存储在变量中可以防止多个jQuery“查询”。

As my project is a web app, I'm keen to tune up what I can for the browser.

由于我的项目是一个网络应用程序，我很想调整我的浏览器。

5 个解决方案

#1

It is always good practice to cache your nodes. The amount of work the JS engine has to do to locate the nodes is more expensive than the memory that you will use storing the node (of course unless you are storing a massive DOM tree or something).

缓存节点始终是一种好习惯。 JS引擎定位节点所需的工作量比用于存储节点的内存要贵（当然除非您存储大量的DOM树或其他东西）。

So the winner is:

所以获胜者是：

var myElement = $("#the-name-of-my-element")

myElement.doSomethingOnce;
myElement.doSomethingTwice;
...
myElement.doSomethingTenTimes;

#2

If you are doing multiple tasks with same element than it's better to cache it to variable so JS will not re-select element on every call.

如果你使用相同的元素执行多个任务，那么最好将它缓存到变量，这样JS就不会在每次调用时重新选择元素。

Also it's easier to maintain your code - e.g. if you want to change selector, than you have to change it in one place instead of going through code and searching for it.

此外，维护代码也更容易 - 例如如果你想改变选择器，你必须在一个地方改变它而不是通过代码并搜索它。

#3

Using $("#the-name-of-my-element") everytime dom element search is performed.

每次执行dom元素搜索时使用$（“＃the-name-of-my-element”）。

Using var myElement = $("#the-name-of-my-element") dom element search is performed only once and then stored to variable. So next time it will be accessed faster and without additional functions called.

使用var myElement = $（“＃the-name-of-my-element”）dom元素搜索只执行一次，然后存储到变量中。因此，下次访问速度更快，无需调用其他函数。

So, in conclusion - assigning element to variable if you have to use it several times is more efficient than searching it every time.

因此，总之 - 如果必须多次使用它，则将元素赋值给变量比每次搜索它更有效。

#4

with $("#the-name-of-my-element") jQuery is traversing the entire dom tree to find all elements which apply to the selector rule.

使用$（“＃the-name-of-my-element”）jQuery遍历整个dom树以查找适用于选择器规则的所有元素。

Thus, putting the result in to a variable and using that instead of using the same selector a couple of times will be more efficient.

因此，将结果放入变量并使用它而不是使用相同的选择器几次将更有效。

Caveats: if one of the called method (doSomeThing..()) adds a new element with the same selector, this element won't be treated. As long as it's an ID, fine, but might be a problem when using classes (".someclass")

警告：如果其中一个被调用的方法（doSomeThing ..（））添加了一个具有相同选择器的新元素，则不会处理此元素。只要它是一个ID，很好，但在使用类时可能会出现问题（“.someclass”）

#5

jQuery does not cache selectors - as detailed in this question:

jQuery不会缓存选择器 - 详见此问题：

Does jQuery do any kind of caching of "selectors"?

jQuery是否会对“选择器”进行任何缓存？

As a result, each time you perform $("#the-name-of-my-element") jQuery is performing some work to match the selector.

因此，每次执行$（“＃the-name-of-my-element”）时，jQuery都会执行一些工作来匹配选择器。

For anything other than trivial code, I'd always cache selectors.

对于除了普通代码之外的任何东西，我总是缓存选择器。

#1