优化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"))关联的对象,然后将遍历指定的 checkbox.如果我按照建议的解决方案,那么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支持的情况下.