javascript - 循环中的 jQuery 性能问题

Question

我有以下 Javascript 在我的弹出窗口中运行，它使用 jQuery 从父窗口中选择选中的复选框，然后对于每个复选框，它再次使用 jQuery 从隐藏字段(也从父窗口)中选择关联的数据。

var chked = $('[name^="mycheckbox_"]:checked', opener.frmMain);
var hdn;
var fieldId;
var data = {};
$.each(chked, function (key, field) {

    hdn = field.id.replace('chk_', 'hdn_');

    data[hdn + 'id'] = $('[name="' + hdn + 'id"]', opener.frmMain).val();
    data[hdn + 'name'] = $('[name="' + hdn + 'name"]', opener.frmMain).val();
});

我遇到的问题是，当有超过一千个复选框时，执行 $.each 循环可能需要一分钟多的时间。如果我在 $.each 循环中注释掉以下几行，那么性能会显着提高:

data[hdn + 'id'] = $('[name="' + hdn + 'id"]', opener.frmMain).val();
data[hdn + 'name'] = $('[name="' + hdn + 'name"]', opener.frmMain).val();

我正在尝试找出如何提高性能，同时仍然加载关联的隐藏字段。一种选择是在循环执行之前使用 jQuery 预先查询隐藏字段，然后在循环中此查询返回的数组中执行查找。但是，我不确定在 $.each 循环中执行数组查找是否会比现有的 jQuery 调用更快。如有任何意见，我们将不胜感激。

Answer 1

我建议使用 Ends With Selector并缓存它返回的元素。这应该消除大部分冗余 DOM 遍历，因为您将能够使用更小的列表进行过滤:

// Retrieve all possible matches from the DOM at once
var $endsInId = $("[name$='id']", opener.frmMain);
var $endsInName = $("[name$='name']", opener.frmMain);

$.each(chked, function (key, field) {

    hdn = field.id.replace('chk_', 'hdn_');

    data[hdn + 'id'] = $endsInId.filter('[name="' + hdn + 'id"]').val();
    data[hdn + 'name'] = $endsInName.filter('[name="' + hdn + 'name"]').val();
});