Question

请问哪个更有效？

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;

我有一个页面，其中html元素与JS有很多不同且有时重复的交互，所以我想知道将元素存储在变量中是否会阻止多个jQuery＆＃34;查询＆＃34;。

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

Answer 1

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

所以获胜者是：

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

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

Answer 2

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

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

Answer 3

每次执行dom元素搜索时都使用$("#the-name-of-my-element")。

使用var myElement = $("#the-name-of-my-element") dom元素搜索只执行一次，然后存储到变量。因此，下次访问速度会更快，而且没有额外的函数。

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

Answer 4

使用$("#the-name-of-my-element") jQuery遍历整个dom树以查找适用于选择器规则的所有元素。

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

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

Answer 5

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

因此，每次执行$("#the-name-of-my-element")时，jQuery都会执行一些工作来匹配选择器。

除了琐碎的代码之外，我总是缓存选择器。

另见......