jQuery:通过从变量中选择元素来减少DOM遍历？

Question

我有一长串DOM元素,我正在抓取属性以保存到对象.

看起来过度使用DOM操作来反复使用jQuery选择器.

var a = $('input[name=a]:checked').val(),
    b = $('input[name=b]')is(':checked'),
    c = $('input[name=c]').val();

我想可能有办法做某事var $form = $('#form');,然后使用$form.find('input[name=a]:checked')或$form.children('input[name=b]')或$form.filter('input[name=c]').但是这些例子都没有了.我相信因为我没有选择元素本身,所以选择它们的父元素不会阻止jQuery重复使用DOM.真的吗？

另一种选择可能是为这个(:/)专门为所有元素添加另一个类,但由于某种原因,这似乎很奇怪.这将会给我一个数组,但是,我以为我可以使用,防止反复遍历DOM？像这样的东西:

var $formElementArray = $('.the_elements_you_wanted');

然后使用过滤器？

var a = $formElementArray.filter('input[name=a]:checked').val(),
    b = $formElementArray.filter('input[name=b]')is(':checked'),
    c = $formElementArray.filter('input[name=c]').val();`

这是最好的方法吗？这种事情有最好的做法吗？看起来有点蹩脚,我必须专门添加一个类以防止过多的DOM遍历,因为我正在操作的一些元素不会被组合在一起,否则,如果是这样的话,那么就行了起来. .

Answer 1

正如我在评论中建议的那样，如果您确实想知道答案，则必须测试此类性能问题，并且可能必须在几种不同的浏览器中进行测试。

这是五个不同场景的简单测试用例：http://jsperf.com/scoped-selector-perf-test

1. 按名称全局搜索（您的原始代码）
2. 将搜索范围仅限于父表单
3. 给每个item一个唯一的id，直接搜索id即可
4. 使用公共类并按公共类中的名称过滤每个项目
5. 通过 id 使用纯 JavaScript

在 Chrome v26 中运行这些，在 jQuery 选项 (1-4) 中，通过唯一 ID 搜索每个项目是最快的。比按名称进行全局搜索快 13 倍，比过滤公共类快 7 倍，比范围限定到表单父级快 4 倍。

按 id 进行的纯 JavaScript 搜索比最快的 jQuery 选项快 17 倍，比原始代码快 223 倍。在 Firefox 和 IE10 中也看到了类似的结果。

一些结论：

1. 将搜索范围限定在公共父级确实有帮助，但不如使用更快的选择器开始
2. 搜索速度tag[name="xxx"]相当慢
3. 通过id查找速度很快
4. document.getElementById("a")明显快于$('#a')