大数据量下jQuery执行耗时与SweetAlert加载异常问题

原代码闪烁原因 #

JavaScript是单线程语言，原代码中showSweetAlertLoader()之后立即执行大量同步DOM操作（15000行的遍历与DOM追加），这些同步代码会阻塞浏览器的UI渲染线程。浏览器来不及完成SweetAlert弹窗的渲染，就被后续耗时操作占满线程；等所有DOM操作完成后，弹窗才被短暂渲染出来，随即调用closeSweetAlertLoader()关闭，因此出现闪烁现象。

你的异步改造问题 #

你尝试的异步方案没有真正解决线程阻塞：

• DulicateCols()中的所有操作（DOM查找、遍历、append）都是同步任务，async/await和Promise.all并没有让出UI线程——因为map里的async function没有包含任何异步任务（如定时器、网络请求），Promise.all会立即完成，耗时操作依然同步执行，阻塞UI渲染。

正确解决方案 #

方案1：先让浏览器渲染弹窗，再执行耗时操作 #

利用setTimeout把耗时任务放到宏任务队列，让浏览器先完成SweetAlert的渲染，再执行数据处理：

$("#optDuplicateCol").click(function () {
  if (verifyColumnSelection()) {
    showSweetAlertLoader()
      // 用setTimeout让出UI线程，确保弹窗渲染完成
      .then(() => setTimeout(DulicateCols, 0))
      .then(() => {
        closeSweetAlertLoader();
      })
      .catch(error => {
        console.error(error);
        closeSweetAlertLoader();
      });
  }
});

// 保留原DulicateCols逻辑（无需async，因为我们用setTimeout异步触发）
function DulicateCols() {
  if (!verifyColumnSelection()) return;

  var q_table = $("#q-table");
  var q_table_header_row = $("#q_table_header_row");
  var selectedHeaderTitle = $("#q-header-selected").text();
  var q_table_tbody = $("#q_table_tbody");

  var selectedTds = q_table.find('td.q-col-selected');
  var dataArray = [];
  selectedTds.each(function () {
    var qTableDataValue = $(this).find('.q-table-data').text();
    dataArray.push(qTableDataValue.trim());
  });

  // 优化：减少DOM操作次数——先拼接所有HTML，再批量插入
  var rows = q_table_tbody.find('tr');
  rows.each(function(index) {
    var tdHtml = `<td><div class='q-table-data'>${dataArray[index]}</div></td>`;
    $(this).append(tdHtml);
  });

  var copiedColHeader = `<th scope='col' class='q-table-data-header' onclick='handleColumnSelection(this)'>${selectedHeaderTitle} - Copy</th>`;
  q_table_header_row.append(copiedColHeader);
}

// 保留原showSweetAlertLoader和closeSweetAlertLoader
function showSweetAlertLoader() {
  return new Promise(resolve => {
    Swal.fire({
      title: 'Loading...',
      allowEscapeKey: false,
      allowOutsideClick: false,
      didOpen: () => {
        resolve();
      },
    });
  });
}

function closeSweetAlertLoader() {
  Swal.close();
}

方案2：分批处理耗时任务（更友好的UI响应） #

对于15000条记录，即使异步触发，一次性处理所有DOM操作仍可能造成短暂卡顿。可以将任务拆分成多个批次，每处理一批就给浏览器留出渲染时间：

$("#optDuplicateCol").click(function () {
  if (verifyColumnSelection()) {
    showSweetAlertLoader()
      .then(() => processBatch())
      .then(() => {
        closeSweetAlertLoader();
        // 添加表头
        var selectedHeaderTitle = $("#q-header-selected").text();
        var copiedColHeader = `<th scope='col' class='q-table-data-header' onclick='handleColumnSelection(this)'>${selectedHeaderTitle} - Copy</th>`;
        $("#q_table_header_row").append(copiedColHeader);
      })
      .catch(error => {
        console.error(error);
        closeSweetAlertLoader();
      });
  }
});

function processBatch() {
  return new Promise(resolve => {
    var q_table_tbody = $("#q_table_tbody");
    var selectedTds = $("#q-table").find('td.q-col-selected');
    var dataArray = [];
    selectedTds.each(function () {
      var qTableDataValue = $(this).find('.q-table-data').text();
      dataArray.push(qTableDataValue.trim());
    });

    var rows = q_table_tbody.find('tr');
    var totalRows = rows.length;
    var batchSize = 500; // 每批处理500行，可根据性能调整
    var currentIndex = 0;

    function processNextBatch() {
      var endIndex = Math.min(currentIndex + batchSize, totalRows);
      for (; currentIndex < endIndex; currentIndex++) {
        var tdHtml = `<td><div class='q-table-data'>${dataArray[currentIndex]}</div></td>`;
        $(rows[currentIndex]).append(tdHtml);
      }
      if (currentIndex < totalRows) {
        // 继续下一批，让出UI线程
        setTimeout(processNextBatch, 0);
      } else {
        resolve();
      }
    }

    processNextBatch();
  });
}

额外性能优化建议 #

• 减少DOM操作次数：避免在循环中频繁调用append，可以先拼接所有HTML字符串，再一次性插入（不过对于15000行，分批更稳妥）。
• 缓存DOM查询结果：提前查询所有需要的DOM元素（如rows = q_table_tbody.find('tr')），避免循环中重复查询。
• 使用原生DOM API：相比jQuery，原生document.querySelector、element.append等操作性能更高，可进一步提升速度。

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