jQuery性能优化：缓存元素后重复调用$()是否影响性能？

在jQuery里反复调用选择器（比如多次用$('#myDiv')执行操作）确实是低效的不良实践——每次调用都得重新遍历DOM、解析选择器，还得创建新的jQuery对象，性能损耗不小。但你提到的两个场景，性能影响和重复调用选择器并不一样，具体拆解如下：

场景一：用原生API获取元素后，每次用$(element)调用方法 #

这种做法比重复调用$('#myDiv')要好很多，但仍有不必要的开销。document.getElementById('myDiv')是原生API，执行速度极快，不会触发DOM查询。但每次用$(element)包裹时，都会创建一个新的jQuery实例，虽然这个过程的开销远小于DOM查询，但频繁调用还是会浪费内存和CPU资源。

最优做法是把原生元素包装一次后缓存成jQuery对象，后续直接复用：

const myDiv = document.getElementById('myDiv');
const $myDiv = $(myDiv);
// 之后直接用缓存的jQuery对象操作
$myDiv.hide();
$myDiv.addClass('active');

场景二：缓存jQuery对象后，又用$(element)包裹调用方法 #

这种操作完全是多余的性能浪费，但比重复DOM查询的损耗还是轻一些。jQuery内部会检测到传入的已经是jQuery对象，不会重新查询DOM，但还是会触发初始化逻辑，生成新的对象副本（不同jQuery版本逻辑略有差异）。

正确的做法就是直接用缓存好的jQuery对象，没必要多此一举：

// 正确姿势：缓存后直接使用
const $myDiv = $('#myDiv');
$myDiv.hide();
$myDiv.addClass('active');

// 多余操作：重复包裹已有的jQuery对象
$($myDiv).hide(); // 完全没必要，平白增加开销

总结一下：

• 这两种场景的性能负面影响都远小于重复调用选择器，但都不是最优实践。
• 记住核心原则：DOM查询只做一次，jQuery对象只创建一次，之后全程复用这个缓存的对象。

内容的提问来源于stack exchange，提问作者Devin Dixon