.NET单页应用中jQuery DOM表格搜索性能优化求助

看来你遇到了大表格场景下jQuery DOM查询的性能瓶颈，尤其是这个函数还会被多次调用，每次都遍历几千行的DOM表格，确实会造成严重延迟。下面我分几个关键步骤帮你优化代码：

1. 预缓存DOM数据到内存映射表（最核心的优化） #

既然函数会被多次调用，而且每次都要从表格里读取相同的partNo和对应linecode，完全没必要每次都去查DOM——DOM操作的性能开销比内存访问高太多了。我们可以在表格数据加载完成后，一次性把所有行的映射关系缓存到内存对象里，后续调用直接读内存：

// 定义一个全局/模块级的缓存对象，仅初始化一次
let partLinecodeMap = {};

// 在表格加载完成后调用这个函数初始化缓存
function initPartLinecodeCache() {
    // 只查询一次DOM，获取表格所有行
    $('#content').children(0).find('tbody tr').each(function() {
        const $row = $(this);
        // 这里需要明确partNo所在的列（比如假设在第1列，你可以根据实际情况修改）
        // 尽量指定列，比遍历整个行文本更高效
        const rowPartNo = $row.find('td:nth-child(1)').text().trim();
        const linecode = $row.find('td:nth-child(10)').text().trim();
        
        if (rowPartNo) {
            partLinecodeMap[rowPartNo] = linecode;
        }
    });
}

注意：如果表格数据会动态更新（比如分页、筛选、新增行），记得在数据更新后重新调用initPartLinecodeCache()刷新缓存。

2. 重写原函数，用缓存替代DOM查询 #

现在你的函数可以彻底摆脱DOM操作，直接从缓存里拿值，同时优化循环逻辑：

getOriginalPartNoForConsumables: function (partNo, IfAltBtnClicked) {
    // 从缓存中直接获取linecode，时间复杂度O(1)
    const linecode = partLinecodeMap[partNo] || '';

    // 优化循环：用原生数组的find方法替代冗余的Object.keys+each
    const matchedItem = pricing.partsWithPrices.find(item => {
        return item.partno === partNo && item.linecode === linecode;
    });

    if (matchedItem) {
        partNo = `${matchedItem.partno}*${matchedItem.linecode}`;
    }

    return partNo;
}

3. 如果无法预缓存（比如表格实时动态变化），优化单次DOM查询 #

如果因为表格数据频繁动态更新，没办法提前缓存，那我们可以优化单次DOM查询的性能：

• 放弃使用自定义的:Contains选择器，改用filter()方法手动判断文本——自定义选择器通常会带来额外的性能开销
• 提前缓存表格的tbody元素，避免每次都从#content开始遍历DOM

优化后的DOM查询代码：

// 先缓存tbody，只查询一次
const $tbody = $('#content').children(0).find('tbody');

// 用filter替代:Contains，手动判断行是否包含目标partNo
const linecode = $tbody.find('tr').filter(function() {
    return $(this).text().includes(partNo);
}).find('td:nth-child(10)').text().trim();

如果需要忽略大小写匹配，可以改成$(this).text().toLowerCase().includes(partNo.toLowerCase())

额外的小优化点 #

• 原函数里的$(item).each(function () { ... })完全多余！item是数组里的普通对象，不是jQuery DOM元素，直接判断属性即可，不需要用jQuery的each循环
• 尽量用原生JS方法（比如find()、includes()）替代jQuery方法，性能会更优
• 变量名建议用驼峰命名（比如linecode而不是Linecode），符合JavaScript的编码规范

内容的提问来源于stack exchange，提问作者user3778549