循环中的 jQuery 性能问题

jQuery performance issue in loop

本文关键字：性能 问题 jQuery 循环      更新时间：2023-09-26

我有以下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调用更快。将不胜感激任何意见。

我建议使用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();
});
相关文章：