AJAX请求后向表格追加10k行致页面卡顿的优化方案咨询

问题背景 #

网页接收10k行CSV数据，调用API获取详情后需向表格追加全部10k行数据（共5列，其中4个输入字段带jQuery验证规则），但追加完成后页面严重卡顿，按钮点击需10-15秒才响应。

已实施的优化措施：

• 将forEach/each循环替换为基础for循环
• 使用隐藏输入字段减少验证开销
• 每追加100行用setTimeout拆分任务，避免浏览器资源耗尽

现有核心代码：

let targetProducts = new Set();
let htmlToAppend = '', itemIndex = 0; 
let itemCodesToValidate = new Map(), itemTotalLength = responseData.body.length; 

let appendToTable = () => {
    for (; itemIndex < itemTotalLength; itemIndex++) {
        let item = responseData.body[itemIndex];
    
        if (!(targetProducts.has(item['item_code']))) {
            htmlToAppend += addTargetProductRow(
                item['item_code'],
                item['item_name'],
                item['price'],
                bulkUpdateValues[item['item_code']]?.a ?? '',
                bulkUpdateValues[item['item_code']]?.b ?? '',
                bulkUpdateValues[item['item_code']]?.c ?? '',
                bulkUpdateValues[item['item_code']]?.d ?? ''
            );
        }

        itemCodesToValidate.set(item['item_code'], 1);
        itemCodes.set(item['item_code'], 1);

        if (itemIndex + 1 < itemTotalLength && itemIndex % 100 == 0) {
            setTimeout(appendToTable, 1000);
            itemIndex++;
            break;
        }
    }

    if (htmlToAppend != '') {
        $('#table_to_append tbody').append(htmlToAppend);
        addTargetProductValidationRules(itemCodesToValidate);

        htmlToAppend = '';
        itemCodesToValidate.clear();
    }

    if ($('#table_to_append tbody tr').length) {
        $('#bulk_update_button').prop('disabled', false);
    }
};

appendToTable();

备注：无法采用分页（硬性要求）

针对性优化方案 #

1. 优化HTML字符串拼接性能 #

现有htmlToAppend += ...的拼接方式会产生大量中间字符串，内存开销极高。改用数组存储片段，最后一次性join：

// 初始化改为数组
let htmlToAppend = [];
// 拼接时用push替代+=
htmlToAppend.push(addTargetProductRow(...));
// 追加DOM时一次性转成字符串
$('#table_to_append tbody').append(htmlToAppend.join(''));

2. 减少DOM重绘回流次数 #

每次追加DOM都会触发浏览器重绘，可通过以下两种方式优化：

• 临时隐藏tbody：追加前隐藏，完成后恢复，避免多次重绘

if (htmlToAppend.length > 0) {
  const $tbody = $('#table_to_append tbody');
  $tbody.hide();
  $tbody.append(htmlToAppend.join(''));
  $tbody.show();
  // 后续逻辑
}

• 使用DocumentFragment：内存中构建DOM片段，一次性插入页面，完全避免中间重绘

if (htmlToAppend.length > 0) {
  const fragment = document.createDocumentFragment();
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = htmlToAppend.join('');
  while (tempDiv.firstChild) {
    fragment.appendChild(tempDiv.firstChild);
  }
  $('#table_to_append tbody').append(fragment);
  // 后续逻辑
}

3. 延迟批量绑定验证规则 #

不要每100行就调用addTargetProductValidationRules，等所有行追加完成后一次性绑定；或者用事件委托替代逐个绑定，减少初始化开销：

// 事件委托方式，无需给每个输入框单独绑规则
$('#table_to_append').on('focusout', 'input.validate-field', function() {
  $(this).valid();
});

// 表单初始化时统一配置规则
$('#your-form').validate({
  rules: {
    // 用类选择器对应通用规则
    '.validate-field': {
      required: true,
      // 其他规则
    }
  },
  errorPlacement: function(error, element) {
    error.insertAfter(element);
  }
});

4. 用requestAnimationFrame替代setTimeout #

setTimeout的固定间隔可能和浏览器重绘节奏冲突，改用requestAnimationFrame让任务在浏览器重绘间隙执行，更高效：

let appendToTable = () => {
  const batchSize = 200; // 可根据实际测试调整批量大小
  const endIndex = Math.min(itemIndex + batchSize, itemTotalLength);
  
  for (; itemIndex < endIndex; itemIndex++) {
    // 原有行处理逻辑
    let item = responseData.body[itemIndex];
    if (!targetProducts.has(item['item_code'])) {
      htmlToAppend.push(addTargetProductRow(...));
      targetProducts.add(item['item_code']); // 提前添加，避免重复判断
    }
    itemCodesToValidate.set(item['item_code'], 1);
    itemCodes.set(item['item_code'], 1);
  }

  // 追加DOM逻辑...

  if (itemIndex < itemTotalLength) {
    requestAnimationFrame(appendToTable);
  } else {
    // 所有行加载完成后再绑定验证规则
    addTargetProductValidationRules(itemCodesToValidate);
    $('#bulk_update_button').prop('disabled', false);
  }
};

requestAnimationFrame(appendToTable);

5. 优化循环内的集合操作 #

把targetProducts.add(item['item_code'])放到判断通过的分支里，避免重复执行；如果itemCodes不是实时需要的，可等所有行处理完再一次性填充，减少循环内的Map操作开销。

内容的提问来源于stack exchange，提问作者Aslam-Ep