javascript - 优化 jQuery 选择器的最佳方式，为什么？

Question

我在我的 JSP 中多次使用这个 jQuery 选择器:

 $("#customers tbody tr td input[type='checkbox'][name='selectedCustomers']")

我在一些博客上找到的解决方案是我应该先做:

var customer=$('#customers')

然后使用上面的客户对象进行进一步的调用。

 customer.find("tbody tr td input[type='checkbox'][name='selectedCustomers']")

我的问题是，这个解决方案是否会有所不同，为什么？

我的理解

当我这样做

$("#customers tbody tr td input[type='checkbox'][name='selectedCustomers']")

jQuery内部会先获取与div id="customers"关联的对象 (通过document.getElementById("customers")) 然后会遍历到指定的 复选框。如果我按照建议的解决方案进行操作，那么 document.getElementById("customers") 将只被触发一次，其余的将相同。因此，我将自己从不必要的多个 document.getElementById 中拯救出来，但其余部分将相同。我的理解正确吗？如果是，仅就我所知，document.getElementById 是否是一项成本更高的操作？

编辑:-

我不仅多次使用上述选择器，而且还使用 div id="customer"下的其他可能的选择器。所以再次提问，如果我先缓存客户对象和不缓存，在性能方面有什么不同？

Answer 1

您无需如此具体。我猜，至多，这个:

$('#customers td [name="selectedCustomers"]')

... 这应该会提高性能。接下来，如果您实际上每次都查询 selectedCustomers，则应该缓存整个内容:

var selectedCustomers = $('#customers td [name="selectedCustomers"]');

否则，如果名称是动态的，并且每页只有一个名称相同的项目...

var item = $(document.getElementsByName(someName)[0]);

另一方面，仅缓存 $('#customers') 几乎毫无意义。 .find 在 customers 上将首先完成与整个选择器一样多的工作，尤其是在 querySelector 支持下。