7

我有一长串 DOM 元素，我从中获取属性以保存到对象。

一遍又一遍地使用 jQuery 选择器似乎是过度使用 DOM 操作。

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')or $form.children('input[name=b]')or $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 遍历似乎有点蹩脚，因为我正在操作的一些元素不会被组合在一起，但如果是这样的话，c'est la vie .

4

1 回答 1

1

正如我在评论中所建议的那样，如果您真的想知道答案，您必须测试任何这样的性能问题，并且您可能必须在几个不同的浏览器中进行测试。

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

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

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

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

一些结论：

  1. 将搜索范围限定到一个共同的父级确实有帮助，但不如使用更快的选择器开始
  2. 搜索tag[name="xxx"]速度很慢
  3. 按 id 搜索很快
  4. document.getElementById("a")明显快于$('#a')
于 2013-05-25T08:56:59.650 回答