使用$()访问同一元素时jQuery是否每次都遍历DOM？

$('button').click(function() {
  $('.child').append('Text. ');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Add text</button>

<div class="parent5">
  <div class="parent4">
    <div class="parent3">
      <div class="parent2">
        <div class="parent1">
          <div class="child">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1. 点击按钮后的jQuery查询逻辑 #

你给出的示例代码中，每次触发点击事件调用$('.child')时，jQuery都会从document根节点重新遍历整个DOM匹配符合类名的元素。jQuery本身没有默认缓存选择器查询结果的机制，每次调用$()选择器方法都会发起一次全新的DOM查询。

2. var childElement = $('.child')的访问有效性 #

这种写法不能保证总能访问到目标子元素：

• 如果你执行赋值代码时，.child元素已经完成渲染加载到DOM树中，那childElement会存储本次查询匹配到的所有.child元素对应的jQuery对象，后续直接操作这个变量就不用重新查询DOM。但要注意这个存储的对象是静态的：如果后续DOM更新删除了原来的.child，或者新增了其他.child元素，已经赋值的childElement不会自动同步更新，还是指向你当初查询到的元素集合。
• 如果你执行赋值代码时.child还没渲染到DOM中（比如脚本放在页面头部，没有等待DOM加载完成就执行查询），那childElement会是一个空的jQuery对象，无法操作到目标元素。

3. 缓存jQuery对象的行业实践 #

把jQuery对象存储到变量中是使用jQuery时非常普遍的最佳实践，尤其是针对需要频繁访问的元素。这种做法可以大幅减少重复DOM查询带来的性能开销，尤其在DOM结构复杂、选择器匹配成本高的场景下优化效果非常明显。业界通常还会给存储jQuery对象的变量加上$前缀作为标识，方便和普通JS变量区分，比如const $child = $('.child')。

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