如何用JavaScript无阻塞地向DOM追加表格行元素？

当然可以解决这个UI阻塞问题！你遇到的情况是因为同步循环把主线程完全占满了——浏览器的主线程既要处理DOM创建和追加，又要处理UI交互（比如复选框点击），但你的循环一次性跑4000次，根本不给浏览器留处理UI事件的时间，自然就出现阻塞了。

下面给你两种高效且无阻塞的实现思路，附代码示例：

核心思路：拆分任务+利用浏览器空闲时间 #

把大量的DOM操作拆分成小批量任务，让浏览器在任务间隙有时间处理UI交互。推荐用requestAnimationFrame（和浏览器渲染节奏对齐）或者setTimeout（简单粗暴）来拆分，配合DocumentFragment减少DOM重排次数，双重优化性能。

方案1：用requestAnimationFrame分批处理（推荐） #

这个方案会把每批DOM操作放在浏览器的下一渲染帧执行，既保证了加载速度，又不会阻塞UI：

function populateTable() {
  const table = document.querySelector('table'); // 用原生DOM操作更快
  const batchSize = 50; // 每批处理50行，可根据性能调整
  const totalRows = 4000;
  let currentRow = 0;

  function processBatch() {
    const fragment = document.createDocumentFragment();
    const endRow = Math.min(currentRow + batchSize, totalRows);

    // 批量创建当前批次的行
    for (; currentRow < endRow; currentRow++) {
      const tr = document.createElement('tr');
      // 这里添加你的单元格内容，示例：
      const td = document.createElement('td');
      td.textContent = `行 ${currentRow + 1}`;
      tr.appendChild(td);
      fragment.appendChild(tr);
    }

    // 一次性把片段追加到表格，减少DOM重排
    table.appendChild(fragment);

    // 如果还有未处理的行，继续下一批
    if (currentRow < totalRows) {
      requestAnimationFrame(processBatch);
    }
  }

  // 启动批量处理
  requestAnimationFrame(processBatch);
}

setTimeout(populateTable, 100);

方案2：用setTimeout拆分任务（更简单） #

如果觉得requestAnimationFrame有点复杂，用setTimeout也能实现，把每批任务放到宏任务队列里，让主线程有机会处理UI事件：

function populateTable() {
  const table = $('table')[0];
  const batchSize = 50;
  const totalRows = 4000;
  let currentRow = 0;

  function processBatch() {
    const fragment = document.createDocumentFragment();
    const endRow = Math.min(currentRow + batchSize, totalRows);

    for (; currentRow < endRow; currentRow++) {
      const tr = $('<tr></tr>');
      // 添加你的td内容，比如：
      tr.append(`<td>行 ${currentRow + 1}</td>`);
      fragment.appendChild(tr[0]); // 把jQuery对象转成原生DOM
    }

    table.appendChild(fragment);

    if (currentRow < totalRows) {
      setTimeout(processBatch, 0); // 0秒延迟让浏览器处理UI
    }
  }

  setTimeout(processBatch, 0);
}

setTimeout(populateTable, 100);

关键优化点说明 #

1. DocumentFragment的作用：它是一个"虚拟"的DOM容器，把所有新创建的tr先放进片段里，最后一次性追加到表格，这样只会触发一次DOM重排，而不是每创建一行就触发一次，性能提升非常明显。
2. 批量大小调整：batchSize可以根据实际情况调，比如100行一批也可以——数值越大总耗时越短，但如果太大可能还是会有轻微阻塞；数值越小越流畅，总耗时会略长，但用户体验更好。
3. 原生DOM操作优先：尽量用原生document.createElement代替jQuery的$('<tr></tr>')，减少库的封装开销，进一步提升速度。

这样改造后，你会发现页面在加载表格的过程中，复选框之类的UI控件完全可以正常点击，不会再出现3-4秒的阻塞了！

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