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

按名称进行全球搜索（您的原始代码）
将搜索范围限定为父表单
为每个项目指定唯一ID，然后直接搜索ID
使用公共类并按公共类
使用id

在Chrome v26中运行这些jQuery选项（1-4），按唯一ID搜索每个项目是最快的。比名称的全局搜索速度快13倍，比过滤普通类快7倍，比表格父级的范围快4倍。

id的普通javascript搜索比最快的jQuery选项快17倍，比原始代码快223倍。在Firefox和IE10中也可以看到类似的结果。

一些结论：

将搜索范围限定为共同父级确实有帮助，但不如使用更快的选择器开始
按tag[name="xxx"]搜索非常慢
按ID快速搜索
document.getElementById("a")明显快于$('#a')

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

1 个答案:

一些结论：